带有滚动激活状态的粘性目录

假设您有一个双列布局：一列是带有内容的主列，另一列是边栏。假设它有大量内容，并且有需要滚动的部分。边栏列基本上是空的，因此您可以安全地在其中放置一个 position: sticky; 目录，用于主列中的所有内容。这是文档中一种相当常见的模式。

Bramus Van Damme 有一个不错的教程，从语义标记开始，使用 HTML 和 CSS 实现大部分功能，最后用 JavaScript 完成活动导航增强。

例如，如果您没有点击自己向下滚动到某个部分（您可能可以使用 :target 样式来进行活动导航），则需要使用 JavaScript 来确定您滚动到的位置并突出显示活动导航。这部分活动内容使用 IntersectionObserver 处理得很好，它就像专为此类情况而设计的 API。

这是该结果

它让我想起了 Hakim El Hattab 的一个非常类似的演示，他称之为 Progress Nav。设计模式完全相同，但 Hakim 的版本具有这种超炫的 SVG 路径，它可以沿着路径自行绘制，并为子导航进行缩进。我会在这里嵌入一个视频

它没有使用 IntersectionObserver，因此如果您想对此进行修改，可以将它们组合在一起！

vsync

# 2020 年 1 月 31 日

我去年用 React 做了一个 Codepen，使用了自定义钩子，它允许类似于上面描述的功能，而且还有更多！
非常灵活、稳定和高效

一开始我也觉得 IntersectionObserver 会很合适，但很快我就发现它对于我的设想来说性能不好，也不够可靠。现在它很完美。

perija

评论永久链接# 2020 年 3 月 5 日

您好 vsync，您做得很好。我想知道您是否在 github 上有这个示例？

Chris Coyier

# 2021 年 5 月 11 日

Davor Suljic 给出了一个巧妙的解决方案（无需 JavaScript！）

这是一个无需 JavaScript 的解决方案。每个 <section> 都在边栏导航中对应链接下方设置了背景补丁。例如

section:nth-of-type(1) {
  background: right 2rem top 2rem / 15em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc);
``background-attachment: fixed;
}

background-attachment: fixed; 使补丁标记链接（具有透明背景），只要查看该部分就会如此。它会创建一种更新导航活动状态的视觉效果。

需要手动将所有部分背景放置在正确的位置，但我认为这是值得的。

评论