偏移页面以防止粘性标题覆盖自动生成的锚点

Question

我正在使用 jekyll 生成我的页面，正如任何人都知道使用 jekyll 一样，h-tags 上的锚标记是自动生成的。

我不想要的解决方案：

1. 添加填充 — 我的 h-tag 使用边距，因为我是一个普通人。此外，我的粘性标题是 50 像素高，这意味着我所有的 h 标签都需要至少 55（ish）像素的填充。这会导致间距过大。
2. 在span 标签中创建自己的锚——这违背了自动生成标签的意义，我正在尝试过一个 D.R.Y.生活方式。

总结：我需要在不改变h-tag的位置的情况下偏移anchor的位置。

---

如果这个问题已经得到解答，我很抱歉创建了一个重复的问题。我找不到前面提到的“解决方案”没有“解决”的答案。

Answer 1

您可能想要使用:target 伪选择器，当 URL 中的哈希值和元素的 id 相同时匹配。因此，该样式将仅适用于已导航到的 h-tag，而不是全部。

例如，您可以使用:target::before 在所选标签的顶部添加边距：

:target::before {
      content: "";
      display: block;
      margin-top: -75px;
      height: 75px;
}

Here，此技术与动画一起使用，该动画在一秒后移除边距，这样当用户向上滚动页面时，边距不再存在。

Answer 2

添加这个解决了我的问题。

html {
  scroll-padding-top: 70px; /* height of sticky header */
}