html - 粘性标题覆盖锚文本

Question

我有一个浮动在页面其余部分的粘性标题。当我链接到页面锚点时，当然是滚动，因此锚点位于页面顶部。但是，当这种情况发生时，标题会覆盖下面的文本。

有没有办法解决这个问题？我不能只是将锚点向下移动，因为页面上有很多锚点，并且每个锚点后面的文本数量都不同。我的第一个想法是以某种方式滚动到锚点上方的某个高度。

谢谢，大卫

Answer 1

:target 伪元素可能是您正在寻找的。使用 :target 您可以处理用#-mark 指出的元素。在此处阅读有关它的更多信息

Answer 2

我遇到了同样的问题，最终制定了这样的规则：

A.named:target {
    display: inline-block;
    height: 120px;
    margin-top: -120px;
}

然后，我将“命名”类应用于我希望浏览器滚动到的任何锚标记。这在浏览器顶部和包含锚点的元素底部之间增加了 120 像素的空间 - 大约 80 像素用于标题，另外 40 像素用于补偿我链接到的 H2 标题的高度......并且，负边距抵消了正边距，它不会影响我页面的外观。

希望这可以帮助！