CSS如何实现文章目录的实时滚动高亮显示_Sticky定位配合JS逻辑

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《CSS如何实现文章目录的实时滚动高亮显示_Sticky定位配合JS逻辑》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

IntersectionObserver是实现滚动高亮的唯一合理起点，因其能精准监听标题进入视口，兼顾性能、精度与兼容性，而纯CSS无法感知可视区域。

IntersectionObserver 是滚动高亮的唯一合理起点

靠纯 CSS 实现“随滚动自动高亮当前章节”根本做不到——position: sticky 只能固定目录位置，不能感知内容可视区域。必须用 JS 监听标题进入视口，而 IntersectionObserver 是当前唯一兼顾性能、精度和兼容性的方案（Chrome 51+/Firefox 55+/Safari 12.1+）。

常见错误包括：

• 用 window.addEventListener('scroll') + getBoundingClientRect() 频繁计算，导致滚动卡顿
• 监听整个 article 容器，而不是具体

  、

  标题节点，浪费观察资源

• 在 observer 回调里直接操作 DOM（如 el.classList.add('active')），触发强制同步布局

正确做法是只观察目标标题，threshold: [0, 0.1] 让顶部刚露 10% 就触发，回调中仅记录候选 ID，把高亮更新交给 requestIdleCallback 或节流函数。

目录项与正文标题的 ID 必须严格可映射

点击跳转失败、高亮错位、滚动定位偏移，90% 出自 ID 不一致。不是“看起来一样”，而是 HTML 中的 href="#xxx" 和

的字符串必须完全相同。

实操要点：

• 正文所有标题必须带 id 属性，不能靠 JS 动态生成后不同步（SSR/SSG 场景尤其危险）
• 推荐用 slugify 规则：中文/空格/符号 → 连字符小写，例如 "安装步骤" → "an-zhuang-bu-zhou"
• 目录项用 ，不要用 data-id 或序号模拟
• 服务端渲染时，目录和正文的 ID 生成逻辑必须复用同一函数，客户端渲染建议在 useEffect 或 connectedCallback 中统一注入

点击目录跳转后，标题常被 sticky header 遮挡怎么办