今天有空稍微看了下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(images/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>? 
當窗口一加載的時候 我讓當前文檔 一個相對定位 那么浮動元素就相對文檔來說 他是絕對定位 所以不管窗口縮小時候還是移動窗口 那個浮動元素都不會改變位置！