Scrollspy 是一个非常实用的插件，它能够根据滚动条的位置自动更新导航链接的高亮状态。这个功能特别适合于长页面或者文档页面，使得用户可以轻松地了解自己当前所处的位置，并且快速跳转到需要查看的部分。
激活 Scrollspy
要使用 Scrollspy 功能，首先需要确保 Bootstrap 的 JavaScript 文件已经正确加载。Scrollspy 插件依赖于 Popper.js 和 Bootstrap 的 JavaScript 文件，所以请确保这些文件都已经加载。
<!-- 引入必要的 CSS 和 JS 文件 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
然后，给需要监听滚动事件的容器添加 data-bs-spy="scroll" 属性，并设置滚动区域的高度和溢出方式。
<div id="navbar-example" class="position-fixed w-25 overflow-auto" data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="0" tabindex="0"> <!-- 导航链接列表 --> </div>
这里，data-bs-spy="scroll" 表示启用 Scrollspy，data-bs-target="#navbar-example" 指定了目标元素的 ID，data-bs-offset="0" 控制了与顶部的距离，而 tabindex="0" 则让元素可以接收焦点以便键盘导航。
设置导航链接
接下来，在导航栏或任何其他容器中创建一组链接，每个链接对应页面中的一个部分。例如：
<nav id="navbar-example" class="navbar navbar-light bg-light flex-column align-items-stretch p-3"> <a class="nav-link" href="#section-1">Section 1</a> <a class="nav-link" href="#section-2">Section 2</a> <a class="nav-link" href="#section-3">Section 3</a> </nav>
这些链接将作为导航的目标，当用户滚动页面时，它们会根据滚动位置自动高亮显示。
页面内容
为了使 Scrollspy 能够正常工作，你需要为每个部分添加相应的 ID，这样 Scrollspy 才能准确地定位到每个部分。
-- -------------------- ---- -------
---- ---------------- ------
---- -------------------- -------------------------------- ------------------ ------------------------- -------------
--- ---------------------- ------
-----------------
--- ---------------------- ------
-----------------
--- ---------------------- ------
-----------------
------
------在这个例子中，我们通过 <h4> 标签来分隔不同的部分，并为其分配唯一的 ID。这些 ID 需要与导航链接中的 href 属性相对应。
自定义样式
你可以通过自定义 CSS 来改变 Scrollspy 的外观。例如，给激活的链接添加一些特殊的样式：
.nav-link.active {
font-weight: bold;
color: #007bff; /* 蓝色 */
}这行 CSS 将使得被激活的导航链接变得加粗并且变成蓝色。
结合其他组件
Scrollspy 可以与其他 Bootstrap 组件一起使用，比如粘性顶部导航栏。只需将顶部导航栏设置为固定位置即可：
<nav class="navbar sticky-top navbar-light bg-light"> <a class="navbar-brand" href="#">项目名称</a> </nav>
使用 sticky-top 类可以使导航栏始终固定在顶部，即使页面滚动也能保持可见。
通过以上步骤，你可以创建一个功能完善的 Scrollspy，帮助用户更好地浏览你的网页内容。