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

相关jQuery代码段：

 

 
  
  1. $(window).scroll(function(){  
  2.    
  3.     var scrollTop = $(window).scrollTop();  
  4.    
  5.     if(scrollTop > 66)  
  6.    
  7.         $('#menu').css({position:'fixed',top:'0px'}).stop().animate({'opacity':'0.8'},400);  
  8.    
  9.     else  
  10.    
  11.         $('#menu').css({position:'static'}).stop().animate({'opacity':'1'},400);  
  12.    
  13. });  
  14.    
  15. $('#menu').hover(function(){  
  16.    
  17.     var scrollTop = $(window).scrollTop();  
  18.    
  19.     if(scrollTop > 66){  
  20.    
  21.         $('#menu').stop().animate({'opacity':'1'},400);}  
  22.    
  23.     },function(){  
  24.    
  25.     var scrollTop = $(window).scrollTop();  
  26.    
  27.     if(scrollTop > 66){  
  28.    
  29.         $('#menu').stop().animate({'opacity':'0.8'},400);  
  30.    
  31.     }  
  32.    
  33. }); 
 
  
代码中的#menu需改动为自己导航栏的ID，另外，请用一个div包裹整个导航栏，然后添加和导航栏同高的height站位，防止紧接导航后的元素直接跳上来被覆盖，还有就是给导航加个z-index:9999层设置。