JQUERY判斷元素是否在可視區

假設此元素爲 #item,先說幾個關鍵的屬性:

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

$('#item').outerHeight()
#item 的實際尺寸,即 height+padding+border

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

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

$(window).height()
瀏覽器窗口可視區域的高度
用腳後跟想一想就能想到,在窗口上下滾動的狀況下,一個頁面元素的狀態有3種,1.向上滾動超出可視區域,2.向下滾動超出可視區域,3.在可視區域內.很明顯,咱們須要的就是1和2兩種狀況. 狀況1: 因爲元素隨頁面向上滾動,因此天然能想到,在頁面頂部偏移量不斷增長的過程當中,邊界是從上至下通過一段距離,而這個距離的區域剛好就是元素自己的偏移量加上元素自己的高度,因此當

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

$(window).scrollTop()<($('#item').offset().top-$(window).height())

那麼結論就是將這兩種狀況做或運算便可達到目的.如下表達式結果若是爲true,則 #item 不在可視區域內.反之則在可視區域內.

($(window).scrollTop()>($('#item').offset().top+$('#item').outerHeight()))||(($(window).scrollTop()+$(window).height())<$('#item').offset().top)

http://www.cnblogs.com/3body/p/5417198.html