jQuery 判断某个元素是否在可见区域内这个功能是经常在用的, 但自己没有注意过总结, 下面就总结在这里. 希望对自己和有需要的朋友有帮助!我采用一个题目的形式, 帮助自己记忆.题目: 假定某个元素, $("#item"), 实现元素在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('消失了');
}
})