如何判斷元素是否在屏幕可視範圍內

假設目標元素：#element

var element= $('#element');

該元素相對於文檔頂部的偏移距離

var elementOffsetTop = $("#element").offset().top;

獲取該元素的高度

var elementOuterHeight = $("#element").outerHeight(true); //這個方法能夠傳遞一個參數true, 若是傳遞表示須要求出的高度含有外邊距

獲取頁面滾動的距離

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

瀏覽器可見區域的高度:

var winHeight = $(window).height();

那應該如何肯定元素在可見區域內呢？
假設當元素的上邊框恰好出如今瀏覽器的底部時（臨界點）

winScrollHeight + winHeight = elementOffsetTop

此時，若是winScrollHeight 增長，則元素在屏幕內出現；若是winScrollHeight 減小，則元素在屏幕內消失。
翻譯成程序就是：

winScrollHeight > elementOffsetTop-winHeight //元素出現
winScrollHeight <= elementOffsetTop-winHeight //元素消失

假設當元素的下邊框恰好出如今瀏覽器的頂部時（臨界點）

elementOffsetTop + elementOuterHeight = winScrollHeight

此時，若是winScrollHeight 增長，則元素在屏幕內消失；若是winScrollHeight 減小，則元素在屏幕內出現。
翻譯成程序就是：

elementOffsetTop + elementOuterHeight > winScrollHeight //元素出現
elementOffsetTop + elementOuterHeight <= winScrollHeight //元素消失

實現代碼：

if((winScrollHeight > elementOffsetTop-winHeight) && (winScrollTop < elementOffsetTop + elementOuterHeight)) {
     console.log("出現了")
} else {
     console.log("消失了")
}

可應用場景是惰性加載，當元素首次出如今屏幕中時，加載特定的資源。