sticky定位只负责目录栏粘滞，高亮联动必须由JavaScript配合IntersectionObserver实现；其失效常因父容器overflow、transform、flex对齐等隐性规则导致。
直接说结论：sticky 定位本身不负责高亮联动，它只管“粘住目录栏”；高亮和跳转必须靠 JavaScript 配合 IntersectionObserver 或 scroll 事件监听实现。
为什么 sticky 元素不能自动高亮当前章节
sticky 是纯 CSS 行为，只控制元素在滚动时的视觉定位状态（relative → fixed），它不感知滚动位置、不读取 DOM 结构、也不触发任何回调。所谓“滚动到 h2 就高亮对应目录项”，这属于逻辑判断，CSS 做不了。
常见错误是以为给 .toc-item 加 position: sticky 就能自动响应章节变化——其实那只会让每个目录项各自“粘”在页面不同位置，彻底乱套。
- sticky 必须作用在**整个目录容器**（如
.toc-wrapper）上，不是单个目录项 - 目录项（
.toc-item）应保持position: static或relative，仅用于布局和样式 - 高亮状态需通过 JS 动态添加 class（如
is-active），再由 CSS 控制颜色/背景等
IntersectionObserver 是最稳的高亮检测方案
比起监听 scroll 事件手动计算 offsetTop，IntersectionObserver 更精准、性能更好，且天然支持阈值控制（比如让章节进入视口 20% 时就触发高亮）。
关键点：
- 观察目标是文章里的标题元素（
h2,h3,h4），不是目录项 - 每个被观察的标题需有唯一
id，且与对应目录项的href值一致（如@#@#@#@#@#@#@#@#@#@0对应环境准备
- observer 的
threshold设为[0, 0.1]可兼顾首屏加载和滚动平滑性 - 注意调用
unobserve()避免重复回调，尤其在 Vue/React 中组件卸载前要清理
sticky 目录栏的父容器必须满足五个硬性条件
哪怕 JS 高亮逻辑写对了，目录栏不 sticky，整个体验就垮了一半。以下任一条件不满足，position: sticky 都会静默失效：
- 父容器（如
.content-layout）必须有明确高度约束，例如max-height: 100vh或height: calc(100vh - 60px) - 父容器必须设
overflow-y: auto（或scroll），hidden或未声明都会断掉滚动上下文 - sticky 元素自身不能是
display: table-row/inline等受限值，推荐保持display: block - 祖先链中任意元素不能有
transform、perspective、filter—— 这些会创建新层叠上下文，直接禁用 sticky - 必须指定
top（或bottom等），只写position: sticky不生效
移动端适配时 sticky 容易被 flex/grid 的对齐行为干扰
在响应式布局中，目录栏常放在 display: flex 的容器里。如果父 flex 容器设了 align-items: center 或 justify-content: center，会导致 sticky 元素初始位置偏移，top: 0 实际无法触达视口顶部。
解决方案很直接：
- flex 父容器加
align-items: flex-start - grid 父容器加
justify-items: start - 避免对 sticky 元素使用
margin-top: auto、align-self: flex-end等“推上去”的方式 - 移动端切上下布局时，目录容器不再需要 sticky，记得用媒体查询关掉：
@media (max-width: 768px) { .toc-wrapper { position: static; } }
真正难的不是写几行 position: sticky，而是确保整条渲染链没被 transform、flex 对齐、overflow 隐藏这些“看不见的规则”悄悄截断。高亮逻辑可以重写，但 sticky 失效时连 debug 都难定位——因为它根本不报错，只是默默不工作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
