最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS3和jQuery实现花瓣网固定顶部位置悬浮菜单效果
时间:2015-03-12 编辑:简简单单 来源:一聚教程网
花瓣网以前的菜单效果还不错,首先是展示出全部的菜单,然后当你向下滑动网页的时候,菜单自动吸顶固定悬浮在浏览器的顶部,这个用户也能很好的切换不同的分类,查看更多的内容,而对于网站来说,也提升了不少的用户体验和交互性。
制作方法
本文将来为大家简单的介绍一下如何制作出这样的效果。
HTML代码
首先我们编写一些基本的HTML代码,分别给网站的LOGO定义一个#header类,给菜单定义.nav类。
花瓣
CSS代码
对于网站的LOGO,我们让其居中显示,然后再定义一个颜色和底部边框。
#header{
width:100%;
border-top:solid 1px #ccc;
border-bottom:solid 1px #ccc;
text-align:center;
}
对于菜单部分,我们让所有的菜单项都在一行显示,并对a标签定义足够的填充和间距。
.nav{background:#fff;margin:20px auto 0;border:solid 1px #ccc;zoom:1;border-radius:5px;box-shadow:0 1px 6px rgba(0,0,0,0.1);color:#D74452;}
.nav:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
.nav ul li{float:left;margin:0 20px;line-}
.nav ul li a{cursor:pointer;}
.nav ul li a:hover{text-decoration:underline;}
当用户向下滑动网页的时候,我们会给菜单添加一个类,这个能让菜单浮动到网页的顶部。
.nav_scroll{
position:fixed;
width:100%;
margin:0;
left:0;
top:0;
}
JavaScript代码
首先我们需要引入jQuery库。
获取用户滑动网页的距离,如果大于网站LOGO的高度+导航的高度,那么就给导航添加一个nav_scroll类,如果小于这个高度,那么就移除nav_scroll类。
$(document).ready(function(){
var topMain=$("#header").height()+20//是头部的高度加头部与nav导航之间的距离
var nav=$(".nav");
$(window).scroll(function(){
if ($(window).scrollTop()>topMain){//如果滚动条顶部的距离大于topMain则就nav导航就添加类.nav_scroll,否则就移除
nav.addClass("nav_scroll");
}else{
nav.removeClass("nav_scroll");
}
});
})
好了,以上就是使用CSS3和jQuery制作仿花瓣网固定顶部位置悬浮导航菜单的全部教程。
-
上一个: css下中文字体的英文写法
-
下一个: css3实现鼠标悬停动态特效
相关文章
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31
- css3中仿放大镜效果的几种方式原理介绍 10-26
- CSS3切割轮播图的代码展示 10-26
- CSS组合选择器解析 10-26
- css带搜索导航栏的代码展示 10-26