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});

            });