使用jQuery或者原生JavaScript实现判断元素是否在可视区

一、jQuery

function isVisible($node) {
    var windowH = $(window).height(),// 窗口高度  视口高度
        scrollH = $(window).scrollTop(), // 滚动条高度
        $nodeOffsetH = $node.offset().top, // 元素距离文档顶部的高度
        $nodeHeight = $node.outerHeight(); // 元素自身高度 没用true 因此不包含margin

    // console.log($(document).height() ,'$(document).height() ')

    // 如果滚动高度大于 元素距离文档顶部的高度加上元素的自身高度( 说明 元素滚过头了)
    // 或者  元素距离文档顶部的高度 大于 滚动高度加上窗口高度 （说明  还没滚到）
    // 这两个条件只要满足其一  就不在可视区

    if (!(scrollH > ($nodeOffsetH + $nodeHeight - 5) || (scrollH + windowH) < $nodeOffsetH)) {
        // 这里减5 为修正值 点击a 标签锚点定位时 有2px左右的误差
        return true
    } else {
        return false
    }

}

二、原生JavaScript

 function  isVisible(node) {
      const windowH = window.innerHeight;// 窗口高度  视口高度
      const scrollH = document.querySelector('.main-content').scrollTop; // 滚动条高度
      const nodeOffsetH = node.offsetTop; // 元素距离文档顶部的高度
      const nodeHeight = node.offsetHeight; // 元素自身高度  不包含margin
      // console.warn(windowH, scrollH, nodeOffsetH, nodeHeight, 'windowH,scrollH,nodeOffsetH,nodeHeight')

      // console.log($(document).height() ,'$(document).height() ')

      // 如果滚动高度大于 元素距离文档顶部的高度加上元素的自身高度( 说明 元素滚过头了)
      // 或者  元素距离文档顶部的高度 大于 滚动高度加上窗口高度 （说明  还没滚到）
      // 这两个条件只要满足其一  就不在可视区

      if (!(scrollH > ((nodeOffsetH + nodeHeight) - 5) || (scrollH + windowH) < nodeOffsetH)) {
        // 这里减5 为修正值 点击a 标签锚点定位时 有2px左右的误差
        return true
      }
      return false
    }