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('消失了');
    }
})