滚动监听 Scrollspy
滚动监听根据滚动位置自动高亮导航中对应的条目：在滚动容器上加 data-bs-spy="scroll"，并用 data-bs-target 指向外部导航即可。下方每个演示框都可以真实滚动观察高亮联动。
胶囊导航 + 滚动容器
官方推荐写法：导航（nav-pills）放在固定高度、overflow-y:auto 的滚动容器外面，容器内放带 id 的内容块；data-bs-target 指向导航容器，随滚动自动高亮。试试滚动下面的区域。
首页
这里是首页内容区。滚动容器有固定高度并允许内部滚动，Scrollspy 监听的是这个容器的滚动位置，而不是整个浏览器窗口。
当你向下滚动时，浏览器视口「经过」哪一个小节，导航上对应的胶囊就会自动加上 active 高亮。
个人资料
个人资料小节：头像、昵称、简介等信息都集中在这里。注意观察上方「个人资料」胶囊在本节进入可视区域时亮起。
再往下滚一点，高亮会平滑地交给下一个小节。
消息中心
消息中心小节：系统通知、点赞与评论提醒按时间倒序排列。
这一段继续撑开滚动高度，让容器里出现真实的滚动条。
账户设置
账户设置小节：密码、隐私、通知偏好。滚到底部后，「账户设置」保持高亮。
反向滚动回顶部，高亮又会沿导航依次退回。
列表组导航
导航不一定是胶囊——把 data-bs-target 指向一个 list-group，Scrollspy 同样会随滚动给 .list-group-item 加上 .active。
快速开始
列表组导航版 Scrollspy：左侧条目随右侧内容滚动同步高亮，适合长文档目录。
这是第一小节，内容用来撑出滚动高度。
安装方式
通过 npm 安装，或直接使用 jsDelivr 上的 CDN 链接引入 CSS 与 JS。
主题定制
修改 Sass 变量即可统一调整品牌色、圆角与阴影，构建后覆盖默认样式。
常见问题
滚动到底部时最后一个条目保持高亮；回到顶部则第一条恢复高亮。
嵌套锚点
Scrollspy 也支持嵌套的普通锚点列表：子级 <a href> 直接指向带 id 的段落，滚动经过时同样会被高亮。
章节一
嵌套锚点示例的开头。左侧目录可以有缩进层级，滚动经过哪条链接就高亮哪条。
章节二
章节二正文。
2.1 小节
2.1 小节正文——缩进目录中的第一条子链接会在滚动到这里时亮起。
2.2 小节
2.2 小节正文。
章节三
章节三正文，滚到底部收束。