页面标题与页面锚点重叠问题的解决方法
P粉521748211
2023-08-21 19:18:36
<p>如果我在HTML页面中有一个固定在顶部的非滚动标题,具有定义的高度:</p>
<p>是否有一种方法可以使用URL锚点(<code>#fragment</code>部分)使浏览器滚动到页面中的某个特定位置,但仍然尊重固定元素的高度<strong>而无需使用JavaScript的帮助</strong>?</p>
<pre class="brush:none;toolbar:false;">http://example.com/#bar
</pre>
<pre>错误(但是常见行为): 正确:
+---------------------------------+ +---------------------------------+
| BAR///////////////////// header | | //////////////////////// header |
+---------------------------------+ +---------------------------------+
| 这里是其余的文本 | | BAR |
| ... | | |
| ... | | 这里是其余的文本 |
| ... | | ... |
+---------------------------------+ +---------------------------------+
</pre>
<p><br /></p>
如果您不能或不想设置一个新的类,可以在CSS中为
::before
伪元素添加一个固定高度的:target
伪类:或者使用jQuery相对于
:target
滚动页面:我遇到了同样的问题。 我通过给锚点元素添加一个类,并将topbar的高度作为padding-top的值来解决了这个问题。
我使用了以下的CSS: