“導航欄下拉至一定高度后固定在頂部的特效”,也有同學喜歡叫跟隨導航什么的。反正就是這個么意思。先直接上代碼:
<script type="text/javascript"> $(function(){ var nav=$(".nav"); //得到導航對象 var win=$(window); //得到窗口對象 var sc=$(document);//得到document文檔對象。 win.scroll(function(){ if(sc.scrollTop()>=100){ nav.addClass("fixednav"); }else{ nav.removeClass("fixednav"); } }) }) </script>
將這個js放到要實現效果的頁面里面去,然后我們要修改的是第三行的.nav,“nav“改成你自己頁面導航欄的class;第七行的”100“為下拉到100個像素的時候觸發特效,可以自行修改至合適的高度。
然后在css文件里面增加這個屬性:
.fixednav { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 999; }
這樣就差不多完成了。
大概講下這個js的意思,判斷下拉到一定高度的時候,給導航欄的div插入一個”fixednav“屬性,然后給”fixednav“加上固定在頂部的參數。