Scrollspy

Bootstrap 的滚动监听（Scrollspy）插件是一个非常实用的组件，它可以自动更新导航菜单项的激活状态，根据用户滚动页面的位置来高亮显示导航中的对应项。这使得用户可以直观地看到他们在页面上所处的位置。

如何使用 Scrollspy

通过 Data Attributes

要使用 Scrollspy，你可以在 HTML 中使用 data attributes 来激活它。通常，你会在 <body> 标签上添加 data-spy="scroll" 属性，并设置 data-target 属性为导航菜单的 ID 或类名。

<body data-spy="scroll" data-target="#navbar-example">
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      <!-- 导航项 -->
    </ul>
  </div>
  <!-- 页面内容 -->
</body>

通过 JavaScript

你也可以通过 JavaScript 来初始化 Scrollspy。首先，确保你的页面已经加载了 Bootstrap 的 JavaScript 文件。然后，你可以使用以下代码来初始化 Scrollspy：

$('body').scrollspy({
    target: '#navbar-example' })

选项

Scrollspy 有一些可用的选项，例如 offset，它允许你设置从顶部开始的偏移量，默认值为 10 像素。

<body data-spy="scroll" data-target=".navbar-example" data-offset="0">

方法

如果你在页面上动态添加或删除了元素，可能需要刷新 Scrollspy 来重新计算。这时，你可以使用 .refresh() 方法：