今天有空稍微看了下Jquery动画函数animate这个方法，发现可以用这个方法来做下简单的右侧浮动菜单 因为经常做淘宝页面时候会碰到这样的效果 以前都是用人家的javascript组件代码 发现老是用人家也不好，所以今天有空用jqeury中的animate这个方法写了一个简单的浮动菜单！原理非常的简单 就是当滚动条滚动时候 让他运行一个方法 然后在那个方法里面简单的计算下 动画元素的top 计算方法是：window的高度-元素的高度 再除以2 就可以让元素在页面上是剧中的 然后在加上元素滚动的高度 ！！！

代码如下：

 

 
   
     
    
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2.  
    
  2.  <html xmlns="http://www.w3.org/1999/xhtml">  
    3.  
    
  3.  <head>  
    4.  
    
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    5.  
    
  5.  <title>无标题文档</title>  
    6.  
    
  6.  <style>  
    7.  
    
  7. .test{ height:8400px;}  
    8.  
    
  8. .float{ width:103px; height:213px; background: url(images/float.png) no-repeat; overflow:hidden; position:absolute; right:10px; top:100px;}  
    9.  
    
  9.  </style>  
    10.  
    
  10.   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>    
    11.  
    
  11.  </head>  
    12.  
    
  12.  
    13.  
    
  13.  <body>  
    14.  
    
  14.  <div class="test"></div>  
    15.  
    
  15.      <div class="float">aaaa</div>  
    16.  
    
  16.       
    17.  
    
  17.  <script>  
    18.  
    
  18.     $(function(){  
    19.  
    
  19.         $(document).css({position : "relative"})  
    20.  
    
  20.         $(".float").css({position : "absolute",top : "100px",right : "10px"})     
    21.  
    
  21.         $(window).scroll(function(){  
    22.  
    
  22.             rightScroll();    
    23.  
    
  23.         })  
    24.  
    
  24.         function rightScroll(){  
    25.  
    
  25.              var wH = $(window).height(),   
    26.  
    
  26.                  eH = $(".float").height(),   
    27.  
    
  27.                  sH = $(window).scrollTop();   
    28.  
    
  28.             $(".float").animate({top : (wH-eH)/2+sH},{ queue: false, duration: 900 });    
    29.  
    
  29.         }  
    30.  
    
  30.     })  
    31.  
    
  31.  </script>  
    32.  
    
  32.  </body>  
    33.  
    
  33.  </html>  
    34.  
   
 
   
当窗口一加载的时候 我让当前文档 一个相对定位 那么浮动元素就相对文档来说 他是绝对定位 所以不管窗口缩小时候还是移动窗口 那个浮动元素都不会改变位置！