仿花瓣网的自动悬浮导航效果
body, h1, ul {
margin:0;
}
ul li {
list-style-type:none;
}
#header {
width:100%;
border-top:solid 1px #ccc;
border-bottom:solid 1px #ccc;
text-align:center;
}
h1 {
padding:10px 0;
color:#D74452;
}
.nav {
width:100%;
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_scroll {
position:fixed;
width:100%;
margin:0;
left:0;
top:0;
}
.nav:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.nav ul li {
float:left;
margin:0 20px;
height:30px;
line-height:30px;
}
.nav ul li a {
cursor:pointer;
}
.nav ul li a:hover {
text-decoration:underline;
}
h2 {
height:400px;
line-height:400px;
}
$(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");
}
});
})
花瓣网
关注最新最热视频家居旅行1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
刚进入网页导航栏是固定位置的
当拖动的高度超过限定高度之后导航栏变成悬浮在顶部
