Lösung für das Problem der Überlappung von Seitentitel und Seitenanker
P粉521748211
2023-08-21 19:18:36
<p>Wenn ich in einer HTML-Seite einen nicht scrollbaren Header habe, der oben fixiert ist und eine definierte Höhe hat: </p>
<p>Gibt es eine Möglichkeit, URL-Anker (<code>#fragment</code>-Teil) zu verwenden, damit der Browser zu einer bestimmten Position auf der Seite scrollt, aber dennoch die Höhe des festen Elements berücksichtigt?<strong> ohne Verwendung von JavaScript</strong>? </p>
<pre class="brush:none;toolbar:false;">http://example.com/#bar
</pre>
<pre>Fehler (aber häufiges Verhalten): Richtig:
+--------------------+ +------------- ---- -------------------+
|. BAR//////////////////////////////////////// /// Header |
+--------------------+ +------------- -------------------+
|. Rest des Textes hier |
|. ... |
|. ... |. Rest des Textes hier |
|. ... |
+--------------------------------+ +-------------- -------------------+
</pre>
<p><br /></p>
如果您不能或不想设置一个新的类，可以在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);我遇到了同样的问题。 我通过给锚点元素添加一个类，并将topbar的高度作为padding-top的值来解决了这个问题。
我使用了以下的CSS：
.anchor { padding-top: 90px; }