类似逛，美丽说那样的浮动导航栏制作法

2019独角兽企业重金招聘Python工程师标准>>>

 

先来简单说说原理：监测浏览器滚动条的距离，大于一定长度时，给导航栏添加“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层设置（转，但已测试成功）。

转载于:https://my.oschina.net/u/1040928/blog/149396