仿花瓣网的自动悬浮导航效果

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

刚进入网页导航栏是固定位置的

当拖动的高度超过限定高度之后导航栏变成悬浮在顶部

总结

以上是生活随笔为你收集整理的仿花瓣网html模板,仿花瓣网的自动悬浮导航效果 jquery的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。