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

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

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

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

item 的實(shí)際尺寸,即 height+padding+border

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

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

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

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

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

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

--

JQuery監(jiān)聽頁面滾動總結(jié)

1、當(dāng)前滾動的地方的窗口頂端到整個(gè)頁面頂端的距離：

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

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

    $(val).offset().top;

3、對頁面滾動條滾動的監(jiān)聽：要放在頁面加載的時(shí)候

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



});

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