jQuery 判斷某個元素是否在可見區域內

這個功能是經常在用的, 但自己沒有注意過總結, 下面就總結在這里. 希望對自己和有需要的朋友有幫助!

我采用一個題目的形式, 幫助自己記憶.

題目:　　假定某個元素, $("#item"), 實現元素在可見區域時打印'出現了', 該元素在不可見區域時打印'消失了'.

需要的知識點(以下知識點純屬大白話),

 

當拖動滾動條時, 這個元素隨着頁面滾動, 該元素距離頁面頂部的距離:　　

var itemOffsetTop = $("#item").offset().top;

 

$("#item")元素的高度:

var itemOuterHeight = $("#item").outerHeight(); //這個方法可以傳遞一個參數true, 如果傳遞表示需要求出的高度含有外邊距, 否則不含有. 具體視需求而定.

 

頁面滾動的距離:

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

 

瀏覽器可見區域的高度:

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

 

知道了以上的知識點, 我們來分析一下, 如何確定該元素在可見區域內呢?

/*  思考:
    在窗口上下滾動的情況下, 一個頁面元素的狀態有下面3種
    ① 向上滾動超出可見區域
    ② 向下滾動超出可視區域
    ③ 在可視區域內
*/
// 情況1 -> 由於元素隨頁面向上滾動, 整個頁面滾動的距離大於元素頂部偏移量 + 元素本身的高度 -> 超出
// 情況2 -> 由於元素隨頁面向下滾動, 整個頁面滾動的距離小於元素頂部偏移量 - 瀏覽器可見區域高度 -> 超出

 

具體實現:

var $win = $(window);
var itemOffsetTop = $("#item").offset().top;
var itemOuterHeight = $("#item").outerHeight();
var winHeight = $win.height();
$win.scroll(function () {
    var winScrollTop = $win.scrollTop();
    if(!(winScrollTop > itemOffsetTop+itemOuterHeight) && !(winScrollTop < itemOffsetTop-winHeight)) {
        console.log('出現了');
    } else {
        console.log('消失了');
    }
})