1. 监听某个元素的滚动条事件
$(selector).scroll(function(){......});
2.获取滚动条滚动的距离
$(selector).scrollTop(); $(selector).scrollLefft();
3.滚动条事件和offset方法的应用
实例1.随浏览器滚动条而滚动的浮动div。例图:
代码:
#floatRight{ position:relative; float:right; width:200px;height:200px;background-color:green; top:100px; z-index:1000;} //滚动条滚动事件1 var oldSite=new Object(); oldSite.left=$("#floatRight").offset().left; oldSite.top=$("#floatRight").offset().top; $(window.document).scroll(function () { var scrolltop = $(document).scrollTop(); var top=oldSite.top+scrolltop; $("#floatRight").offset({ top: top });});
实例2.虽dom元素内滚动条滚动而滚动的浮动div
实例图
#content { 600px; height:1000px; border:2px dotted red; overflow:scroll; margin:auto; } #contentFloat { float:right;position:relative; width:100px; height:100px; background-color:green; top:100px; } //滚动条滚动事件2 var contentFloat = $("#contentFloat"); var top = contentFloat.offset().top; $("#content").scroll(function () { contentFloat.offset({top:top}); });
转自:
http://blog.163.com/m13864039250_1/blog/static/21386524820133216048584/