jquery實現固定頂部導航效果(仿蘑菇街)_jquery

複製程式碼 程式碼如下:

>



$(document).ready(function(){
var headHeight=$(".header").height() 10;
var nav=$(".nav");
$(window).scroll(function(){
if($(this).scrollTop()>headHeight){
nav. addClass("navFix");
}
else{
nav.removeClass("navFix");
}
})
})
;

*{ 邊距：0;填充：0;}
body{ _background-attachment:fixed; _background-image:url(about:blank); } // 實作ie6不支援fixed方法
.header{ width:1000px;高度：60px；保證金：0 自動；文字對齊：中心；}
.nav{ 邊框：1px 實心#ccc;邊框半徑： 5px；溢出：隱藏；高度：30px；寬度：1000px；邊距：10px 自動；背景：#fff;}
.nav li{ float:left;內邊距：0 10px；高度：30px；行高：30px;}
.nav li a{ 文字裝飾：無;顏色:#0CF;}
.nav li a:hover{ 顏色:#000;文字裝飾：底線；}
.nav ul { 列表樣式：無；}
.navFix{ 位置：固定；左：0；頂部：0；_位置：絕對；頂部：表達式（（offsetParent.scrollTop）0）； z-index:2;} // 實作ie6不支援固定方法
.content{ width:1000px;邊距：10px 自動;}
;
頭>

導覽固定在頁面頂部測試

;

• 首頁


• 藍楓介面


• 藍楓介面


• 藍楓介面


• 藍楓介面


• 藍楓介面


• 藍楓介面


• 藍楓介面

div>

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111 p>

11111

11111

11111

111111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

11111

身體>