最可见的是一个轻量级的jQuery插件，它可以检测文档中最可见的元素。它还提供了一个选项，允许您决定是否将可见性计算为图元高度的百分比。

安装：

# Yarn
$ yarn add most-visible

# NPM
$ npm install most-visible --save

如何使用它:

1.导入最可见的jQuery。

// ES 6
import MostVisible from 'most-visible';

// CommonJS:
const MostVisible = require('most-visible');

2.或者加载JavaScript文件最具可视性.js在最新的jQuery JavaScript库（slim构建）之后。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/most-visible.min.js"></script>

3.JavaScript检测文档中最可见的内容部分，然后向其添加自定义CSS类。

<div id="sections">
  <section id="top">
    <span class="text">I'm the most visible section!</span>
  </section>
  <section id="middle">
    <span class="text">I'm the most visible section!</span>
  </section>
  <section id="bottom">
    <span class="text">I'm the most visible section!</span>
  </section>
</div>

$(function () {
  var $sections = $('#sections').find('section');

  checkVisibility();

  $(window).on('scroll', function () {
      checkVisibility();
  });

  function checkVisibility() {
      $sections.removeClass('most-visible').mostVisible().addClass('most-visible');
  }
});

4.决定是否将能见度计算为高度的百分比。

mostVisible({
  percentage: false
})

5.指定计算可见性时要考虑的偏移。

mostVisible({
  offset: 0
})

更新日志：

2.0.0版（2021-12-23）

• 将插件从UMD重组为两个独立的文件；用于浏览器的模块（dist/mest-visible）和用于捆绑器的模块（js/mest-vasible）。
• 删除了使用新的mostVisible（）创建函数实例的功能
• 将makeJQueryPlugin函数重命名为makeJQueryPlugin

2021-07-15

• v1.5.0:更新的依赖项

2019-12-22

• v1.5.0:在比较之前存储viewportHeight的常数值

2019-11-16

• v1.4.0:删除未使用的参数

2019-01-18

• v1.4.0：添加偏移选项

预览截图

jQuery检测最可见 元素 最可见