跟随滚动条而下滑的导航栏

先来简单说说原理：监测浏览器滚动条的距离，大于一定长度时，给导航栏添加“position:fixed”，小于则取消，同时还添加了animate自定义的透明度渐变过渡！现在网页也很流行的效果

相关jQuery代码段：

 

$(window).scroll(function(){  
   
    var scrollTop = $(window).scrollTop();  
   
    if(scrollTop > 66)  
   
        $('#menu').css({position:'fixed',top:'0px'}).stop().animate({'opacity':'0.8'},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':'0.8'},400);  
   
    }  
   
}); 

代码中的#menu需改动为自己导航栏的ID，另外，请用一个div包裹整个导航栏，然后添加和导航栏同高的height站位，防止紧接导航后的元素直接跳上来被覆盖，还有就是给导航加个z-index:9999层设置。