相似逛，美麗說那樣的浮動導航欄製做法

 

先來簡單說說原理：監測瀏覽器滾動條的距離，大於必定長度時，給導航欄添加「position:fixed」，小於則取消，同時還添加了animate自定義的透明度漸變過渡！如今網頁也很流行的效果

相關jQuery代碼段（只需加載<script></script>標籤內便可）：

 <script>

$(window).scroll(function(){  
   
    var scrollTop = $(window).scrollTop();  
   
    if(scrollTop > 66)  
   
        $('#Menu').css({position:'fixed',top:'0px'}).stop().animate({'opacity':'1'},400);  
   
    else  
   
        $('#Menu').css({position:'static'}).stop().animate({'opacity':'1'},400);  
   
});  
   
$('#Menu').hover(function(){  
   
    var scrollTop = $(window).scrollTop();  
   
    if(scrollTop > 66){  
   
        $('#Menu').stop().animate({'opacity':'1'},400);}  
   
    },function(){  
   
    var scrollTop = $(window).scrollTop();  
   
    if(scrollTop > 66){  
   
        $('#Menu').stop().animate({'opacity':'1'},400);  
   
    }  
   

}); </script>

代碼中的#Menu需改動爲本身導航欄的ID，另外，請用一個div包裹整個導航欄，而後添加和導航欄同高的height站位，防止緊接導航後的元素直接跳上來被覆蓋，還有就是給導航加個z-index:9999層設置（轉，但已測試成功）。