IntersectionObserver是实现滚动高亮的唯一合理起点，因其能精准监听标题进入视口，兼顾性能、精度与兼容性，而纯CSS无法感知可视区域。
IntersectionObserver 是滚动高亮的唯一合理起点
靠纯 CSS 实现“随滚动自动高亮当前章节”根本做不到——position: sticky 只能固定目录位置，不能感知内容可视区域。必须用 JS 监听标题进入视口，而 IntersectionObserver 是当前唯一兼顾性能、精度和兼容性的方案（Chrome 51+/Firefox 55+/Safari 12.1+）。
常见错误包括：
- 用
window.addEventListener('scroll')+getBoundingClientRect()频繁计算，导致滚动卡顿 - 监听整个
article容器，而不是具体<h2>、<h3>标题节点，浪费观察资源 - 在 observer 回调里直接操作 DOM（如
el.classList.add('active')），触发强制同步布局
正确做法是只观察目标标题，threshold: [0, 0.1] 让顶部刚露 10% 就触发，回调中仅记录候选 ID，把高亮更新交给 requestIdleCallback 或节流函数。
目录项与正文标题的 ID 必须严格可映射
点击跳转失败、高亮错位、滚动定位偏移，90% 出自 ID 不一致。不是“看起来一样”，而是 HTML 中的 href="#xxx" 和 <h2 id="xxx"> 的字符串必须完全相同。
立即学习“前端免费学习笔记（深入）”；
实操要点：
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 正文所有标题必须带
id属性，不能靠 JS 动态生成后不同步（SSR/SSG 场景尤其危险） - 推荐用 slugify 规则：中文/空格/符号 → 连字符小写，例如
"安装步骤"→"an-zhuang-bu-zhou" - 目录项用
<a href="#an-zhuang-bu-zhou">，不要用data-id或序号模拟 - 服务端渲染时，目录和正文的 ID 生成逻辑必须复用同一函数，客户端渲染建议在
useEffect或connectedCallback中统一注入
点击目录跳转后，标题常被 sticky header 遮挡怎么办
href="#xxx" 默认滚动到元素顶部，但若页面有 position: sticky 的导航栏（比如高度 64px），标题就会被盖住。这不是 bug，是浏览器默认行为。
解决方式只有两个有效路径：
- 给所有标题加
scroll-margin-top：例如h2, h3 { scroll-margin-top: 64px; }（现代浏览器支持，无需 JS） - 用
element.scrollIntoView({ block: 'start', behavior: 'smooth' })替代原生锚点，并在调用前手动减去 header 高度（兼容老浏览器） - 绝对不要用
margin-top: -64px; padding-top: 64px;这类 hack，会导致布局错乱和打印异常
Sticky 目录容器的 top 值必须匹配实际遮挡高度
position: sticky 的 top 不是随便写的像素值，它必须等于页面上真正会遮挡目录内容的固定元素总高度——通常是 header + 导航栏高度之和。
容易忽略的细节：
- 响应式断点下 header 高度可能变化（移动端更矮），
@media中要同步更新top - 如果用了
transform: translateY()或margin-top推动 sticky 容器，会导致粘滞失效 - sticky 元素父容器不能有
overflow: hidden|auto，否则粘滞范围被截断 - 目录容器本身不要设
height或max-height，否则内部滚动会破坏 sticky 行为
最稳妥的写法是：aside { position: sticky; top: var(--header-height, 64px); }，并在 :root 或组件内统一维护该 CSS 变量。
