用原生 JS 实现文章目录

文章目录看起来简单，真做起来有几个细节绕不过去。

生成 ID

正文里的 h2 / h3 通常没有 id。需要按标题文本生成一个 slug，重复的加序号。中文标题要考虑编码。

滚动高亮

监听 scroll 事件，找出当前视口内最靠上的标题。但 scroll 触发很频繁，最好用 requestAnimationFrame 节流：

var ticking = false;
window.addEventListener('scroll', function () {
    if (!ticking) {
        requestAnimationFrame(function () { update(); ticking = false; });
        ticking = true;
    }
});

点击跳转的偏移

页面有吸顶栏时，scroll-margin-top 比 JS 计算偏移更省事：

.post-content h2 { scroll-margin-top: 96px; }

移动端

侧栏放不下就做成抽屉，用同一个 ul 复制一份进去，避免生成两遍 DOM。