Bootstrap 滚动监听（Scrollspy）插件
Bootstrap 滚动监听（Scrollspy）插件
Bootstrap 滚动监听（Scrollspy）插件是一个用于自动更新当前页面导航菜单以及高亮相应部分的插件。该插件借助了data-*属性，根据元素相对于文档顶部的位置来判断当前处于哪个位置，然后自动更新导航菜单。
快速开始
在使用 Bootstrap 滚动监听（Scrollspy）插件之前，需要引入 jQuery，然后再引入 Bootstrap JavaScript 插件文件。可以使用以下代码来引入它们：
<!-- 引入 jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 引入 Bootstrap JavaScript 插件文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>
接下来，在需要启用滚动监听的元素上添加 data-spy="scroll" 属性。例如，在 body 元素上添加该属性可以监听整个页面的滚动：
<body data-spy="scroll"></body>
在需要自动更新导航菜单的元素上添加 data-target 和 data-offset 属性。其中，data-target 属性用于指定需要更新的导航菜单的 ID，data-offset 属性用于指定偏移量，即距离顶部多大距离才会触发更新。例如：
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Scrollspy</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
</ul>
</div>
</nav>
<div id="section1">
<h1>Section 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae libero sodales, sagittis sem et,
vehicula nibh.</p>
</div>
<div id="section2">
<h1>Section 2</h1>
<p>Ut rhoncus neque non mauris tristique, eu gravida tortor suscipit. Sed non luctus ante. Sed at ante sit amet
quam suscipit pellentesque ac nec ligula.</p>
</div>
<div id="section3">
<h1>Section 3</h1>
<p>Proin pretium sapien lacus, ut dignissim nunc feugiat id. Proin quis libero sed est convallis ultrices.
Etiam faucibus volutpat massa, ac convallis erat tincidunt nec.</p>
</div>
<script>
$('body').scrollspy({ target: '#navbarNav', offset: 100 });
</script>
上述代码会在导航菜单中自动更新当前所在部分，并在距离顶部 100 像素时触发更新。
额外选项
除了 data-* 属性外，Bootstrap 滚动监听（Scrollspy）插件还提供了其他一些可供配置的选项。其中，最常用的是 offset 和 target。
offset
offset 选项用于设置偏移量，即距离顶部多少像素时触发更新。可以将其设置为一个整数值，也可以使用一个对象，其中属性名为选择器，属性值为对应偏移量。例如：
$('body').scrollspy({ offset: 100 });
$('body').scrollspy({ offset: { 'top': 100, 'bottom': 200 } });
上述代码分别设置了距离顶部 100 像素时触发更新，以及距离顶部 100 像素、距离底部 200 像素时触发更新。
target
target 选项用于指定需要更新的导航菜单元素。可以将其设置为一个字符串选择器，也可以使用一个 jQuery 对象。例如：
$('body').scrollspy({ target: '#navbarNav' });
$('body').scrollspy({ target: $('#navbarNav') });
上述代码分别使用了一个字符串选择器和一个 jQuery 对象来指定需要更新的导航菜单。
结语
Bootstrap 滚动监听（Scrollspy）插件是一个非常方便的工具，可以让网站的导航菜单更加智能化和易用。在使用时，我们只需要添加一些简单的 data-* 属性或 JavaScript 代码即可实现自动更新导航菜单的功能。