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

Question

我正在使用jekyll生成我的页面，并且任何人都知道使用jekyll，h标签上的锚标签会自动生成。

我不寻找的解决方案：

1. 添加填充 - 我的h-tags正在使用边距，因为我是一个普通人。此外，我的粘性标题是50px高，这意味着我所有的h标签都需要55（ish）px填充的最小值。这会导致间距太大。
2. 在ReadFile标记中创建自己的锚点 - 这会破坏自动生成标记的点，我正在尝试使用D.R.Y.生活方式。

摘要：我需要在不改变h-tag位置的情况下偏移锚点的位置。

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

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 */
}