几乎每一个网站，都有一个分享到侧边栏的功能，
我写的这个是固定在网页窗口的左侧，
html:
<!--------------分享到侧边栏----------------------> <div id="share"> <span>分享</span> </div>
css:
/*******************************分享到侧边栏**************************************/ #share{ position: absolute; left:-100px; top: 50px; width: 100px; height: 100px; background-color: red; z-index: 2; } #share span{ position: absolute; left:100px; top:30px; width:20px; height: 37px; padding-top:5px; display: block; background-color: purple; line-height: 14px; font-size: 14px; text-align: center; }
那么问题来了,怎么固定在网页的中部？
首先获取到窗口的滚动条的到文档顶部的距离，再加上可视区域减去分享到侧边栏的高度除2，就是需要分享到侧边栏的高度。
剩下的就是鼠标移入，侧边栏向右移动。移出缩进。
jquery:
$(function(){ $(window).scroll(function(){ var scrolltop=($(window).height()-100)/2; var top=$(document).scrollTop()+scrolltop; $("#share").css("marginTop",top+"px"); /************把分享栏固定在窗口左侧***********/ }) /************移入移出侧边栏***********/ $("#share").hover(function(){ $(this).animate({left: 0 },300); }, function(){ $(this).animate({left:-100},300); } );
原文：http://www.cnblogs.com/lw1995/p/6659811.html