带固定标题的页面导航

Question

我的网站顶部有一个水平固定标题，当我使用页面导航滚动到ID时，它会将我正在尝试滚动的内容放在标题下方。

有没有办法可以将页面导航显示的位置偏移80像素（向下）？

编辑：我实际上能够以最简单，最可接受的方式自行修复。我把解决方案放在下面的答案中。

Answer 1

好吧，因为没有其他人有答案，我自己解决了。

以下是修复：

JSFiddle

这是通过制作一个隐藏的div来完成的，这个div绝对是在我要滚动到的内容之上的'x'个像素值。然后我滚动到{{1}}而不是我最初想要滚动到的内容。 'x'应该是标题的高度，这样您要滚动的内容就会直接显示在标题下方。

Answer 2

你可以用CSS做到这一点。

HTML：

<header>Your Header Here</header>
<div id=main>Rest of Content</header>

CSS：

header { position: fixed; height: 80px; }
#main { margin-top: 80px; }

Answer 3

尝试阅读Ch​​ris Coyier撰写的这篇文章。他巧妙地使用伪元素来解决“页面导航中的固定标题”问题。看看：http://css-tricks.com/hash-tag-links-padding/。

Answer 4

该示例未显示其工作原理。我通过添加：

来修复它

#header {
    opacity:0.5;
}
#content-scroller {
    height:120px;
}