導航欄下拉至一定高度后固定在頂部的特效


導航欄下拉至一定高度后固定在頂部的特效”,也有同學喜歡叫跟隨導航什么的。反正就是這個么意思。先直接上代碼:

<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“加上固定在頂部的參數。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM