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

代码如下：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>无标题文档</title><style>.test{height:8400px;} .float{width:103px;height:213px;background:url(p_w_picpaths/float.png)no-repeat;overflow:hidden;position:absolute;right:10px;top:100px;} </style><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> </head><body><divclass="test"></div><divclass="float">aaaa</div> <script>$(function(){ $(document).css({position:"relative"}) $(".float").css({position:"absolute",top:"100px",right:"10px"}) $(window).scroll(function(){ rightScroll(); }) functionrightScroll(){ varwH=$(window).height(), eH=$(".float").height(), sH=$(window).scrollTop(); $(".float").animate({top:(wH-eH)/2+sH},{queue:false,duration:900}); } }) </script></body></html>

当窗口一加载的时候 我让当前文档 一个相对定位 那么浮动元素就相对文档来说 他是绝对定位 所以不管窗口缩小时候还是移动窗口 那个浮动元素都不会改变位置！

附件：http://down.51cto.com/data/2359405