纯css无法实现滚动时目录项自动高亮，必须用javascript配合intersectionobserver；sticky仅控制自身定位，不感知滚动位置，无法触发高亮逻辑。
纯 CSS 无法实现滚动时目录项自动高亮——position: sticky只管“自己粘在哪”，不感知内容滚动位置；高亮逻辑必须由 JavaScript 驱动，而 IntersectionObserver 是当前唯一合理、高性能、可落地的方案。
为什么 sticky 定位常被误认为能做高亮
position: sticky 的作用域仅限于其父容器滚动范围内，它不会监听视口变化，也不提供任何回调或状态通知。你看到的“目录固定在侧边”，只是它自己卡住了；但“当前滚动到哪个章节”这件事，它完全不知道。
常见误解包括：
- 给目录项加
position: sticky后，以为它能自动同步内容滚动位置 - 用
:target伪类尝试匹配锚点，但该伪类只响应 URL hash 变化，不响应自然滚动 - 把
scroll-margin-top当成高亮触发依据——它只影响scrollIntoView的定位偏移，不参与判断逻辑
IntersectionObserver 初始化必须等 DOM 就绪且标题存在
如果页面使用框架（如 React/Vue）或动态插入内容，IntersectionObserver 实例创建太早，会导致 observer.observe(el) 对空节点静默失败，getEntries() 返回空数组。
正确做法：
- 在
DOMContentLoaded或框架的生命周期钩子（如useEffect、mounted）中初始化 - 确保所有目标标题（如
<h2 id="api-reference"></h2>）已渲染进 DOM - 避免对同一元素重复调用
observe()，可用observer.takeRecords()检查当前观察状态 - 若标题被设为
display: none或visibility: hidden，它不会触发交叉事件——改用opacity: 0; pointer-events: none
阈值（threshold）和 rootMargin 配合决定高亮时机
默认 threshold: 0 表示元素顶部刚触达视口顶部才触发，但因固定导航栏遮挡，用户实际看到标题时它早已“过线”，导致高亮滞后甚至跳变。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
推荐配置：
-
threshold: [0.1]：元素 10% 进入视口即触发，比0更早响应 -
rootMargin: "-50px 0px 0px 0px"：向上扩展 50px 观察区域，补偿固定头部高度 -
scroll-margin-top: 64px（写在标题上）：确保scrollIntoView不被导航栏遮住
注意：rootMargin 单位必须带 px，不能写成 "-50 0 0 0"，否则无效。
高亮更新必须异步节流，避免强制同步布局
在 IntersectionObserver 回调里直接操作 DOM（如 el.classList.add('active')）会触发浏览器强制重排，尤其在快速滚动时极易卡顿。
更稳妥的做法：
- 回调中只记录当前最接近顶部的标题 ID（例如
currentSectionId = entry.target.id） - 用
requestIdleCallback或简单节流函数（如setTimeout(..., 0)）延迟执行样式更新 - 一次只高亮一个目录项，先清除所有
.active，再给匹配项添加——避免多个同时激活 - 目录项
href必须与标题id严格一致（如href="#usage"↔<h3 id="usage"></h3>），否则点击跳转失败
真正容易被忽略的是：高亮逻辑和滚动跳转是两套独立路径。目录项点击要调用 scrollIntoView 并更新 history，而滚动过程要靠 IntersectionObserver 反向驱动高亮——两者必须共用同一套 ID 映射关系，且不能依赖 DOM 顺序或索引位置来匹配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
