Jquery滚动条事件的处理

Jquery滚动条事件的处理  

2013-04-21 18:09:07|  分类： 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});

            });