纯css无法实现滚动时目录项自动高亮，因position:sticky仅控制自身定位且不感知滚动；高亮必须由javascript驱动，intersectionobserver是唯一合理、高性能、可落地的方案。
纯 CSS 无法实现滚动时目录项自动高亮——position: sticky 只控制自身定位行为，不感知滚动位置，也不触发任何状态变化；高亮逻辑必须由 JavaScript 驱动，IntersectionObserver 是当前唯一合理、高性能、可落地的方案。
为什么 sticky 目录项不会自动高亮
position: sticky 的作用域仅限于其父容器滚动范围内，它不监听视口变化，也不提供回调或交叉状态。你看到的“左侧目录固定在侧边”，只是它自己卡住了；但“当前滚动到哪个 h2 标题”这件事，它完全不知道。
常见误解包括：
- 给目录链接加
position: sticky后，以为它能同步内容滚动位置 - 用
:target伪类匹配锚点——它只响应 URL hash 变化，不响应自然滚动 - 把
scroll-margin-top当成高亮依据——它只影响scrollIntoView()的定位偏移，不参与判断逻辑
sticky 目录 + IntersectionObserver 高亮的最小可行组合
左侧目录用 position: sticky 保持可见，右侧内容滚动时靠 IntersectionObserver 检测标题进入视口并更新高亮状态。关键点：
- 目录项本身不用
observe()，只观察内容区的标题元素（如h2[id]） -
IntersectionObserver必须等 DOM 就绪后初始化：在DOMContentLoaded或框架的useEffect/mounted中创建 - 确保所有目标标题已渲染进 DOM，避免对
null调用observe() - 使用
threshold: 0.1（而非默认0）+rootMargin: "-64px 0px 0px 0px"补偿固定导航栏遮挡
sticky 目录布局中容易失效的三个地方
目录容器设了 position: sticky 却不动？大概率是被某层祖先截断了粘性链：
- 任意祖先设置了
overflow: hidden、overflow: auto或overflow: scroll——这会创建新滚动上下文，sticky只在该容器内生效 - 父容器是 Flex/Grid，但没给目录容器设
min-height: 0或align-items: stretch导致高度计算为 0 - 目录容器或某层父元素用了
transform、filter或will-change——这些强制创建新层叠上下文，直接禁用sticky
另外，top 必须带单位（top: 0 合法，top: 0px 更明确），且它的含义是“距原始位置顶部多少像素才开始吸附”，不是距视口顶部。
移动端和兼容性兜底要点
桌面端左右布局、移动端上下布局时，sticky 在 iOS Safari 15.4 之前不支持嵌套在 transform 元素内的子元素；IE11 和部分安卓 WebView 完全不支持 sticky：
- iOS Safari 建议加
position: -webkit-sticky前缀 - 若目录容器父级用了
transform，尝试加backface-visibility: hidden（旧版 workaround，慎用） - 降级方案不能只靠 CSS：需用
window.addEventListener('scroll')+getBoundingClientRect()手动模拟，但性能差、易抖动 - 真正稳定的做法是：现代浏览器走
IntersectionObserver+sticky，老环境 fallback 到 JS 滚动监听 +fixed定位目录
最常被忽略的是：高亮逻辑依赖的 rootMargin 偏移值，必须和实际导航栏视觉高度严格一致——它不只是 height，还要叠加 border-top-width、padding-top 和 box-shadow 的垂直扩散分量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
