Bootstrap Scrollspy 能自动高亮当前滚动到的导航项，需目标元素有唯一 ID、href 匹配该 ID、容器可滚动并设置 data-bs-spy 属性，且通过 JavaScript 或 HTML 属性初始化，配合 data-bs-offset 和 .active 样式实现精准高亮。
Bootstrap 的 Scrollspy（滚动监听）组件能自动高亮当前滚动到的导航项，常用于单页网站的侧边栏或顶部导航。要让它正常工作，需满足几个关键条件：目标元素要有唯一 ID、导航链接 href 要匹配该 ID、容器需有可滚动区域且设置好 data-bs-spy 属性。
基础 HTML 结构准备
Scrollspy 依赖语义化结构。导航栏用 <nav> 包裹，每个链接的 href 必须指向页面内带 ID 的区块（如 #section1），对应内容区块必须有相同 ID 且高度足够触发滚动变化。
- 导航链接写法：
<a href="#about">关于我们</a> - 对应内容区块：
<section id="about"><h2>关于我们</h2></section> - 整个监听区域（通常是
<body>或某个父容器）需设data-bs-spy="scroll"
启用 Scrollspy 的两种方式
推荐用 JavaScript 初始化，更灵活可控。若用 <body> 作为监听容器，直接在 body 标签加属性即可；若监听局部区域（比如一个固定高度的侧边栏），需给该容器设 position: relative 和 overflow-y: auto，再绑定 Scrollspy。
- 全局监听（body）：
<body data-bs-spy="scroll" data-bs-target="#navbar" data-bs-offset="100"> - 局部监听（如 sidebar）：
<div class="scrollable" data-bs-spy="scroll" data-bs-target="#sidebar-nav">，并确保该 div 有 height 和 overflow -
data-bs-offset控制触发高亮的偏移量（像素），常用于避开固定导航栏遮挡
样式与高亮逻辑说明
Bootstrap 默认会给当前激活的导航项添加 .active 类——不是靠 JS 动态加，而是由 Scrollspy 自动切换。因此你的 CSS 需预先定义 .nav-link.active 或 .list-group-item.active 的样式（比如加背景色或改变文字颜色）。
立即学习“前端免费学习笔记（深入）”；
- 确保导航容器有
id（如id="navbar"），且data-bs-target指向它 - 如果用
.nav或.list-group，内部链接需是.nav-link或.list-group-item，否则 active 类可能不生效 - 内容区块之间留足空白（至少一屏高度），否则滚动太快会导致高亮跳变
常见问题排查
Scrollspy 失效通常因结构或属性缺失。检查是否满足这四点：目标容器有 position: relative（局部监听时）、data-bs-spy 容器可滚动、所有 ID 唯一且 href 完全匹配、JavaScript 已加载 Bootstrap 的 scrollspy 插件（CDN 中包含，无需额外引入）。
- 控制台报 “Offset method is not supported”？说明监听容器没设
position: relative - 高亮不更新？确认 href 值和 section ID 完全一致（大小写、符号都不能错）
- 首次加载不激活首个项？可在 JS 初始化后手动触发一次
scroll()或调用refresh()方法
