必须用 JavaScript 滚动监听+视口判断动态切换 active 类，CSS 无法实现随滚动高亮；需节流、缓存位置、适配 fixed/sticky 导航及移动端，并确保视觉与交互严丝合缝。
滚动时自动高亮当前区块对应的导航项，必须用 JavaScript 判断视口位置并手动切换 active 类；纯 CSS 无法实现“随滚动变化”的高亮，只能静态标记当前页。
滚动监听 + 视口判断是唯一可靠路径
浏览器不提供原生 API 把滚动位置和 DOM 元素 ID 自动映射，所以得自己写逻辑：监听 scroll 事件 → 遍历所有带 id 的目标区块（如 <section id="about"></section>）→ 检查哪个在视口内 → 找到顶部导航中 href="#about" 或 data-target="about" 的 <a></a> → 添加 active 类，其余移除。
- 别用
getBoundingClientRect().top 粗判，容易误触发——顶部多个区块同时进入视口时会反复切换 - 推荐用“最后一个完全/部分可见的区块”作为激活依据，避免抖动
- 节流
scroll事件（如用requestAnimationFrame包一层），否则 iOS Safari 容易卡顿 - 如果区块高度不固定（比如含图片或响应式文字），务必在
resize和load后重新缓存元素位置，否则滚动错位
active 类必须由 JS 动态控制，不能靠 CSS 伪类
CSS 的 :target 只响应 URL 哈希跳转（如点击 <a href="#contact"></a>），对自然滚动无反应；:hover 和 :focus 更不相关。所以 active 必须是真实 class，由 JS 显式增删。
- 导航链接建议统一用
href="#xxx"，和目标区块id="xxx"对应，语义清晰且支持原生锚点跳转 - 避免用
data-id或data-section等自定义属性做映射，增加维护成本 -
a.active样式里别只改颜色——加font-weight: bold或border-bottom: 2px solid #007bff提升可感知性 - 移动端需额外处理
touchmove，iOS Safari 滚动时可能不触发scroll事件
兼容 fixed/sticky 导航栏的 padding 冲突
当导航栏设为 position: fixed 或 position: sticky，滚动后内容会从顶部“钻出来”，遮住首段文字。此时仅靠 JS 高亮不够，视觉体验已受损。
立即学习“前端免费学习笔记（深入）”；
- 必须给
或主内容容器加padding-top，值 ≥ 导航栏高度（如padding-top: 64px） - 若导航高度响应式变化（比如小屏折叠、字号缩放），用 JS 动态计算并更新该 padding，CSS 变量无法实时响应
- 别用
margin-top替代padding-top，否则页面加载闪动明显 - Safari 上
position: sticky配合 transform 有闪烁，优先用fixed+padding-top
真正难的不是写几行 JS，而是让高亮时机和视觉反馈严丝合缝：滚动停稳才激活、不因图片加载延迟错位、小屏触控也跟手、键盘用户能用 Tab 进入且焦点同步。这些细节没被封装进任何“一行代码搞定”的库，得自己校准。
