首頁 > web前端 > js教程 > 主體

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

WBOY
發布: 2016-05-16 17:39:42
原創
1064 人瀏覽過
複製程式碼 程式碼如下:




>
無標題文件


$(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 自動;}
;
頭>


導覽固定在頁面頂部測試



相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板