偏移同一页面内的链接

时间:2013-10-22 15:33:15

标签: javascript jquery html css

我在顶部有一个菜单栏,其中包含如下链接:

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

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

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>

3 个答案:

答案 0 :(得分:1)

您可以将padding-top/margin-top始终应用于您的标题或(在现代浏览器中)只有当它们被定位时 - 正如您所要求的那样,例如

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

有关MDN

:target伪类的更多信息

答案 1 :(得分:0)

将此添加到menuheading

的CSS样式中
.menuheading {
  margin-top:50px;
}

答案 2 :(得分:0)

可能与此重复...... How can I make a menubar fixed on the top while scrolling

默认情况下,身份标签会在页面顶部加载,所以您需要做的只是

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

在附带的问题链接上详细介绍。