判断元素是否在可视区域内

Posted 2022-05-18 zsj-02-14

 

如果页面有头部置顶和底部置底的元素，需要自行进行计算：

• scrollTop  +   头部置顶元素高度
• screenHeight - （置顶和置底元素的高度）

//元素距离页面顶部的距离
var eleTop = $("#ele").offset().top;
//元素本身的高度
var eleHeight = $("#ele").height();
//页面滚动的距离
var scrollTop = $(window).scrollTop();
//可视区域高度
var screenHeight = $(window).height();
/**
   * 第一种情况   由于元素随页面向上滚动, 整个页面滚动的距离  大于 （元素距离页面顶部的距离 + 元素本身的高度 ）-> 超出
    * 第二种情况   由于元素随页面向下滚动, 整个页面滚动的距离  小于 （元素距离页面顶部的距离 - 浏览器可见区域高度 ）-> 超出
*/