仿花瓣網的自動懸浮導航效果

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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。