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/