已经有类似的文章了,但是总感觉哪里不对!
所以此文仅作备忘用,如果能帮助你更好的理解就更好了!
目标元素:#item
var item = $('#item');
当页面滚动时,元素随页面滚动,该元素距离顶部的距离
var itemOffsetTop = $("#item").offset().top;
获取item的高度(我的需求需要包含外边距)
var itemOuterHeight = $("#item").outerHeight(true); //这个方法可以传递一个参数true, 如果传递表示需要求出的高度含有外边距, 否则不含有. 具体视需求而定.
获取页面滚动的距离
var winScrollHeight = $(window).scrollTop();
浏览器可见区域的高度:
var winHeight = $(window).height();
那应该如何确定元素在可见区域内呢?
实现代码:
if(!(winScrollTop > sectionThreeOffsetTop+sectionThreeOuterHeight) && !(winScrollTop < sectionThreeOffsetTop-winHeight)) {
console.log("出现了")
} else {
console.log("消失了")
}