Jquery滚动条事件的处理

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 {
            width: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/

posted @ 2016-10-16 13:40  天翊丨流光  阅读(3331)  评论(0编辑  收藏  举报