Jquery几行代码解决跟随屏幕滚动DIV

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
2. <html xmlns="http://www.w3.org/1999/xhtml">  
3. <head>  
4.     <title>jquery.text-effects</title>  
5.     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
6.     <style>  
7.         #test  
8.         {  
9.             position: absolute;  
10.             top: 10px;  
11.             right: 10px;  
12.             width: 130px;  
13.             height: 60px;  
14.             background: #555;  
15.             color: #fff;  
16.             font-size: 13px;  
17.         }  
18.     </style>  
19.     <script src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>  
20.     <script language="javascript">  
21.         $(document).ready(function () {  
22.             var menuYloc = $("#test").offset().top;  
23.             $(window).scroll(function () {  
24.                 var offsetTop = menuYloc + $(window).scrollTop() + "px";  
25.                 $("#test").animate({ top: offsetTop }, { duration: 600, queue: false });  
26.             });  
27.         });   
28.     </script>  
29. </head>   
30. <body>   
31.     <h1>7行代码的跟随屏幕滚动层.</h1>   
32.     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>   
33.     <div id="test">Dev By CssRain.cn<br/>Test ie6+,firefox3.0</div>   
34.     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>   
35.     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>   
36. </body>   
37. </html> 
38. 后面我修改了一下，让浏览器滚动到340px的时候，导航栏才滚动
39. <script>
    $(function(){
    var leftMenu = $(".left_menu");
    var leftMenuPosition = leftMenu.offset().top;
    $(window).scroll(function(){
    var scrollTop = $(window).scrollTop();
    if(scrollTop>340){
    var offsetTop = leftMenuPosition + $(window).scrollTop()-200+"px";
    leftMenu.animate({top:offsetTop},{duration:600,queue:false});
    }else{
    leftMenu.animate({top:leftMenuPosition},{duration:600,queue:false});
    }
    })
    })
    </script> 

我正在做这个官网，以后会有相关的案例 http://www.qy.com.cn/

1.