Lösung für das Problem der Überlappung von Seitentitel und Seitenanker

Question

Wenn ich in einer HTML-Seite einen nicht scrollbaren Header habe, der oben fixiert ist und eine definierte Höhe hat:

Gibt es eine Möglichkeit, URL-Anker (#fragment-Teil) zu verwenden, damit der Browser zu einer bestimmten Position auf der Seite scrollt, aber dennoch die Höhe des festen Elements berücksichtigt? ohne Verwendung von JavaScript?

http://example.com/#bar

Fehler (aber häufiges Verhalten): Richtig:
+--------------------+ +------------- ---- -------------------+
|. BAR//////////////////////////////////////// /// Header |
+--------------------+ +------------- -------------------+
|. Rest des Textes hier |
|. ... |
|. ... |. Rest des Textes hier |
|. ... |
+--------------------------------+ +-------------- -------------------+

Answer 1

如果您不能或不想设置一个新的类，可以在CSS中为::before伪元素添加一个固定高度的:target伪类：

:target::before {
  content: "";
  display: block;
  height: 60px; /* 固定的标题高度 */
  margin: -60px 0 0; /* 负的固定标题高度 */
}

或者使用jQuery相对于:target滚动页面：

var offset = $(':target').offset();
var scrollto = offset.top - 60; // 减去固定的标题高度
$('html, body').animate({scrollTop:scrollto}, 0);

Answer 2

我遇到了同样的问题。 我通过给锚点元素添加一个类，并将topbar的高度作为padding-top的值来解决了这个问题。

<h1><a class="anchor" name="barlink">Bar</a></h1>

我使用了以下的CSS：

.anchor { padding-top: 90px; }