带有固定标题的页面导航答案

【问题标题】：Page navigation with fixed header带有固定标题的页面导航
【发布时间】：2011-09-27 17:15:32
【问题描述】：

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

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

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

【问题讨论】：

你看起来像标签式导航。 qyestion 不清楚：-(
不，页面导航。 <a href='#blabla'>Click here and it scrolls to blabla</a> 老实说，我不认为可以用其他任何方式来解释。

【解决方案1】：

好吧，既然没有其他人有答案，我自己修好了。

这里是修复：

这是通过创建一个隐藏的div 来完成的，该div 绝对位于我想要滚动到的内容上方的“x”像素数量。然后我滚动到那个div，而不是我最初想要滚动到的内容。 'x' 应该是标题的高度，这样您想要滚动到的内容就会直接显示在标题下方。

【讨论】：

【解决方案2】：

你可以用 CSS 做到这一点。

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

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

【讨论】：

它不起作用。主要内容下移了 80 像素，但 body 仍然到达了页面顶部，因此本地链接仍然到达页面顶部。
我相信必须在 javascript 或 jQuery 中通过执行以下操作来完成：当您单击 href 属性以“#”开头的链接时，它会创建一个不可见元素高于 80 像素并链接到该位置。
这就是为什么我说所有其余的内容都应该放在#main 中。否则它将无法正常工作。您还可以在body 本身上应用margin-top。
这些都不起作用，因为标题在正文内，当您单击页面链接时，该内容将移动到 body 的顶部，现在有办法了只能到达#main 的顶部。（如果您将 main 上的定位设置为固定，它可能会起作用，但只是 margin-top 不会做任何事情来阻止它在标题下方移动）并且在整个主体上设置边距将不起作用，因为标题也在体内。
是的，但是如果标题是固定的，那么它将与正文无关，而是与文档有关，请考虑一下 :)

【解决方案3】：

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

【讨论】：

您不应该只提供指向另一个站点的链接作为答案，因为该站点将来可能会过时。相反，请单击此答案上的“编辑”链接，并在此处包含该页面中解决方案的基本部分。见：meta.stackexchange.com/q/8259

【解决方案4】：

这个例子没有展示它是如何工作的。我通过添加来修复它：

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

【讨论】：