2

我在顶部有一个菜单栏，其链接如下：

<a href="#1">Football</a>
<a href="#2">Cricket</a>
<a href="#3">Rugby</a>
<a href="#4">Tennis</a>

我有一个高度为 50 像素的固定菜单栏。单击链接时，标题隐藏在固定菜单栏后面。单击相应的链接时，是否可以将标题显示低 50 像素（以便它们可以显示）。

html:

<h2 class="menuheading" id="1">Football</h2>
...
<h2 class="menuheading" id="2">Cricket</h2>
...
<h2 class="menuheading" id="3">Rugby</h2>
...
<h2 class="menuheading" id="4">Tennis</h2>
4

3 回答 3

1

您可以始终将 apadding-top/margin-top应用于您的标题或（在现代浏览器中）仅当它们被定位时 - 如您所要求的那样，例如

h2:target {
  padding-top: 50px;
}

MDN:target上关于伪类的更多信息

于 2013-10-22T15:38:35.187 回答
0

将此添加到您的 CSS 样式中menuheading

.menuheading {
  margin-top:50px;
}
于 2013-10-22T15:38:08.143 回答
0

一个可能的重复...如何在滚动时将菜单栏固定在顶部

发生的情况是body标签默认加载在页面顶部，所以你需要做的就是把

body {margin-top:50px;} /* Same height as the menu bar */

它对附加的问题链接进行了更详细的介绍。

于 2013-10-22T15:38:56.647 回答