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