偏移页面以防止粘性 header 覆盖 auto-generated 锚点

Question

我正在使用 jekyll 生成我的页面，众所周知，使用 jekyll，h-tags 上的锚标记是自动生成的。

我不想要的解决方案：

1. 添加填充 — 我的 h-tags 使用边距，因为我是一个正常人。另外，我的粘性 header 是 50px 高，这意味着我所有的 h-tags 都需要至少 55(ish)px 的填充。这会导致间距太大。
2. 在 span 标签中创建您自己的锚点 — 这违背了自动生成标签的要点，而我正试图生活在 D.R.Y 中。生活方式。

总结：我需要在不改变 h-tag.

位置的情况下偏移锚点的位置

---

如果这个问题已经得到解答，我很抱歉创建了一个重复的问题。我找不到这个不是 'solved' 和前面提到的 'solutions'.

的答案

Answer 1

您可能需要使用 :target 伪选择器，它在 URL 中的散列与元素的 id 相同时匹配。因此，该样式将仅应用于已导航到的 h-tag，而不是所有 h-tag。

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

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

Here，此技术与动画一起使用，该动画会在一秒后删除边距，这样边距就不再存在 if/when 用户向上滚动页面。

Answer 2

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

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