具有固定标题的页面导航

Question

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

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

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

Answer 1

好吧，既然没有人有答案，我自己解决了。

这是修复方法：

JSFiddle

这是通过制作一个绝对隐藏的 div 来完成的在我想要滚动到的内容上方放置“x”个像素量。然后，我滚动到该 div 而不是我最初想要滚动到的内容。 “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

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

Answer 4

该示例没有显示它是如何工作的。我通过添加修复了它：

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