固定页眉与页内锚点重叠

Question

如果我在 HTML 页面中有一个非滚动标题，固定在顶部，具有定义的高度：

有没有办法使用 URL 锚点（ #fragment 部分）让浏览器滚动到页面中的某个点，但在 没有 JavaScript 帮助的情况下 仍然尊重固定元素的高度？

 http://example.com/#bar

错误（但常见的行为）：正确：
+--------------------------------+ +------------ ------------------+
| BAR///////////////////// 标题 | | /////////////////////// 标题 |
+--------------------------------+ +------------ ------------------+
|这是文本的其余部分 | |酒吧 |
| ... | | |
| ... | |这是文本的其余部分 |
| ... | | ... |
+--------------------------------+ +------------ ------------------+

原文由 Tomalak 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

我使用了这个 CSS：

 .anchor { padding-top: 90px; }

原文由 mutttenxd 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

 :target::before {
  content: "";
  display: block;
  height: 60px; /* fixed header height*/
  margin: -60px 0 0; /* negative fixed header height */
}

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

 var offset = $(':target').offset();
var scrollto = offset.top - 60; // minus fixed header height
$('html, body').animate({scrollTop:scrollto}, 0);

原文由 Adrian Garner 发布，翻译遵循 CC BY-SA 4.0 许可协议