首頁 > 文章 > web前端 > jquery實現固定頂部導航效果(仿蘑菇街)_jquery

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

WBOY原創: 2016-05-16 17:39:421058瀏覽

 
 
 
 
> 
無標題文件 
  
 
$(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 自動;} 
; 
頭> 
 
 
導覽固定在頁面頂部測試 