jquery实现让导航超出显示范围外时自动贴在屏幕最顶上

凝望长空

jquery实现让导航超出显示范围外时自动贴在屏幕最顶上
　　经常会遇到这样的情况，当页面展示内容过长时，想点导航切换栏目，就得把滚动条拉回到顶上，这样操作总不太人性化，能不能让导航超出显示范围外时自动贴在屏幕最顶上呢？答案肯定是能的。如果不太明白，把滚动条拉到下面点，看下我博客是效果就明白了。

　　其实实现起来并不难，我们先把实现流程大致想一下，首先，如果导航在显示范围内，就不用做修改。当导航超出显示范围，也就是导航距离屏幕顶部的距离小于0的时候，我们要让它浮动在屏幕顶上，然后大于0的时候，进行一个复原操作，原理就是这么简单，大致看下效果图吧

1. 
   
2. $().ready(function(){  
   
3. 
   
4.     //导航距离屏幕顶部距离  
   
5. 
   
6.     var _defautlTop = $("#navigator").offset().top - $(window).scrollTop();  
   
7. 
   
8.     //导航距离屏幕左侧距离  
   
9. 
   
10.     var _defautlLeft = $("#navigator").offset().left - $(window).scrollLeft();  
    
11. 
    
12.     //导航默认样式记录，还原初始样式时候需要  
    
13. 
    
14.     var _position = $("#navigator").css('position');  
    
15. 
    
16.     var _top = $("#navigator").css('top');  
    
17. 
    
18.     var _left = $("#navigator").css('left');  
    
19. 
    
20.     var _zIndex = $("#navigator").css('z-index');  
    
21. 
    
22.     //鼠标滚动事件  
    
23. 
    
24.     $(window).scroll(function(){  
    
25. 
    
26.         if($(this).scrollTop() > _defautlTop){  
    
27. 
    
28.             //IE6不认识position:fixed，单独用position:absolute模拟  
    
29. 
    
30.             if($.browser.msie && $.browser.version=="6.0"){  
    
31. 
    
32.                 $("#top").css({'position':'absolute','top':eval(document.documentElement.scrollTop),'left':_defautlLeft,'z-index':99999});  
    
33. 
    
34.                 //防止出现抖动  
    
35. 
    
36.                 $("html,body").css({'background-image':'url(about:blank)','background-attachment':'fixed'});  
    
37. 
    
38.             }else{  
    
39. 
    
40.                 $("#navigator").css({'position':'fixed','top':0,'left':_defautlLeft,'z-index':99999});  
    
41. 
    
42.             }  
    
43. 
    
44.         }else{  
    
45. 
    
46.             $("#navigator").css({'position':_position,'top':_top,'left':_left,'z-index':_zIndex});  
    
47. 
    
48.         }  
    
49. 
    
50.     });  
    
51. 
    
52.    
    
53. 
    
54. });

复制代码

没有太多好讲的，需要注意的一点就是，IE6不认识position:fixed，需要用position:absolute去模拟，然后实时计算出top的值，另外需要给html和body加两个样式，防止滚动的时候出现抖动，具体可以了解《完美解决IE6不支持position:fixed的bug》。

　　另外需要注意的一点就是，导航的宽度必须是固定值，不能是auto或者100%因为fixed和absolute都不认识，当然你也可以手动获取到导航的宽度，然后写到浮动导航样式里，不过有个前提，导航原先样式里不能有：position:relative，情况可能比较多，最简单的方法还是把导航宽度定死。

　　以上代码可以复制复制到后台设置的HTML页脚代码里，如果遇到浮动导航宽度出问题了，就参考我刚才做的处理办法解决吧。