導航欄下拉至一定高度後固定在頂部的特效,條條道路通羅馬,實現的方法有好多種,這裡介紹箇最簡單易懂的方法。通過jQuery添加移除類來實現。
首先來説,把一箇DIV固定在瀏覽器頂端,需要用到的CSS。
.navbar-fixed-top{ position: fixed; top: 0px; left: auto; //視具體情況來設置左右位置 z-index: 999; }
註意:position:fixed 會使元素脫離文檔,不佔據文檔空間。
對應的JS代碼:
<script type="text/javascript"> $(function(){ var nav=$(".nav"); //導航對象,註意與您的保持一緻。 var win=$(window); //窗口對象 var sc=$(document);//document文檔對象。 win.scroll(function(){ if(sc.scrollTop()>=500){ // 滾動高度視情況而定。 nav.addClass("navbar-fixed-top"); }else{ nav.removeClass("navbar-fixed-top"); } }) }) </script>用法:
1.將CSS 和JS 代碼 放到你要使用的頁麵裡麵。
2.修改導航的類名,與你頁麵導航類名保持一緻。我這裡使用的是 nav。
3.具體滾動的高度,視具體情況而定,我這裡是500 像素。
例子:
蔘考 文檔:
1. bootstrap導航。