前端開發中,有時需要判斷某個元素是否在瀏覽器的可視區域內,或者是否已經滾動出了可視區域.首先想到的便是JavaScript操作,原生方法自然可以,不過jQuery已經封裝了一些屬性,使用起來更方便些,我們這里就討論這種Jquery的方式.(伸手黨可直接看文章屁股 :cool:) 假設此元素為 #item,先說幾個關鍵的屬性:

JavaScript1：
jQuery('#item').offset().top

item 的絕對偏移量,指#item的實際尺寸(即不包括外邊框margin)的上邊界到頁面頂端的距離.這個值不隨窗口滾動而改變

JavaScript2：
jQuery('#item').outerHeight()

item 的實際尺寸,即 height+padding+border

JavaScript3：jQuery('#item').outerHeight(true)#item的實際尺寸及外邊距,即 height+padding+border+margin

JavaScript4：jQuery(window).scrollTop()窗口滾動的頂部偏移量,即此時頁面的上邊界到可視區域的上邊界的偏移量,簡單的可以理解成整個頁面滾動了多少距離JavaScript1jQuery(window).height()

瀏覽器窗口可視區域的高度：用腳后跟想想就能想到,在窗口上下滾動的情況下,一個頁面元素的狀態有3種,1.向上滾動超出可視區域,2.向下滾動超出可視區域,3.在可視區域內.很明顯,我們需要的就是1和2兩種情況. 情況1: 由于元素隨頁面向上滾動,所以自然能想到,在頁面頂部偏移量不斷增加的過程中,邊界是從上至下經過一段距離,而這個距離的區域恰好就是元素本身的偏移量加上元素本身的高度,所以當

JavaScript1：
jQuery(window).scrollTop()>(jQuery('#item').offset().top+jQuery('#item').outerHeight())這個表達式結果為true時,表示元素已經向上滾動,并超出了可視區域.情況2: 與情況1相反,向下滾動的過程,頁面頂部的偏移量是在不斷減少中,所以當它小于元素偏移量與可視區域高度的差值的時候,元素則向下并超出了可視區域,即

JavaScript2：jQuery(window).scrollTop()<</span>(jQuery('#item').offset().top-jQuery(window).height())那么結論就是將這兩種情況作或運算即可達到目的.以下表達式結果如果為true,則 #item 不在可視區域內.反之則在可視區域內.

JavaScript3：(jQuery(window).scrollTop()>(jQuery('#item').offset().top+jQuery('#item').outerHeight()))||((jQuery(window).scroll

--

JQuery監聽頁面滾動總結

1、當前滾動的地方的窗口頂端到整個頁面頂端的距離：

    var winPos = $(window).scrollTop();

2、獲取指定元素的頁面位置：

    $(val).offset().top;

3、對頁面滾動條滾動的監聽：要放在頁面加載的時候

  $(window).scroll(function(event){



});

4、設置滾動條到指定位置。$(window).scrollTop(offset)。