如果您在长滚动页面上有一个目录，例如，由于 position: fixed; 或 position: sticky;，则 JavaScript 中的 IntersectionObserver API 是突出显示目录中项目时的完美伴侣，当相应内容处于视口中时。
Ben Frain 有一篇文章 全部关于这个
感谢 IntersectionObserver，我们有一小段非常高效的代码来创建我们的目录，提供快速链接以在文档中跳转，并在读者阅读时更新他们在文档中的位置。
与需要绑定到滚动事件并执行自己的数学运算的旧技术相比，此代码更短、更快且更合乎逻辑。 如果您正在寻找 Ben 网站上的演示，文章本身就是演示。 这里有一个关于它的视频
我以前提到过这些东西，但这里有一个 Bramus Van Damme 版本
这里还有一个来自 Hakim el Hattab 的版本，它正在 **强烈要求** 有人将它移植到 IntersectionObserver，因为 UI 太酷了
这太酷了！ 我几个月前写过类似的东西。 伟大的帖子！
这太棒了
我对 Intersection Observer API 还很陌生，但将 Hakim 的导航栏概念移植是一个很好的挑战，可以了解它是如何工作的。 似乎工作得很好： https://codepen.io/agrimsrud/pen/XWNLMeW
不过节省的代码行不多，所以我相信有人可以想出一个更有效的版本……
我明白为什么你想要在目录中更深入一层，因为你可能想包含所有内容，但问题是，如果你使用 h1、h2、h3、h4，它会变成一个太长的目录，需要很长时间才能阅读，也许应该是一个 PDF 而不是——或者博客文章应该分成一系列博客文章，这样它看起来像书中的章节。
另外，当目录变得太长时，它会在较小的屏幕上溢出。 请记住，博客文章不是书。 它是为了快速阅读而设计的。 一个带有子级 Hx 的完整目录实际上不需要，因此只使用 H2 并制作一个概述而不是目录更容易快速浏览。
我想说，如果你不能在没有包含 H3 和/或 H4 的情况下将 H2 的最重要内容总结在 H2 标题中，那么你可能做错了。 或许你的 H2 标题不够精确。
我想看看一个有 POC 的论据，说明在目录中深入到 H2 以外。
您好，请问有人能告诉我如何使用 next.js 实现相同的功能吗？