固定页眉与页内锚点重叠 [英] Fixed page header overlaps in-page anchors
问题描述
如果我在 HTML 页面中有一个非滚动标题,固定在顶部,具有定义的高度:
有没有办法使用 URL 锚点(#fragment
部分)让浏览器滚动到页面中的某个点,但仍然尊重固定元素的高度没有 JavaScript 的帮助?
http://example.com/#bar
<前>错误(但常见的行为): 正确:+---------------------------------+ +---------------------------------+|酒吧/////////////////////标题 ||///////////////////////标题 |+---------------------------------+ +---------------------------------+|这是正文的其余部分 ||酒吧 ||... ||||... ||这是正文的其余部分 ||... ||... |+---------------------------------+ +---------------------------------+
我遇到了同样的问题.我通过向锚元素添加一个类来解决它,以顶栏高度作为 padding-top 值.
我使用了这个 CSS:
.anchor { padding-top: 90px;}
If I have a non-scrolling header in an HTML page, fixed to the top, having a defined height:
Is there a way to use the URL anchor (the #fragment
part) to have the browser scroll to a certain point in the page, but still respect the height of the fixed element without the help of JavaScript?
http://example.com/#bar
WRONG (but the common behavior): CORRECT: +---------------------------------+ +---------------------------------+ | BAR///////////////////// header | | //////////////////////// header | +---------------------------------+ +---------------------------------+ | Here is the rest of the Text | | BAR | | ... | | | | ... | | Here is the rest of the Text | | ... | | ... | +---------------------------------+ +---------------------------------+
I had the same problem. I solved it by adding a class to the anchor element with the topbar height as the padding-top value.
<h1><a class="anchor" name="barlink">Bar</a></h1>
I used this CSS:
.anchor { padding-top: 90px; }
这篇关于固定页眉与页内锚点重叠的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!