如何偏移固定导航栏的位置

Question

我的网站上有一个固定的导航栏，它位于顶部，带有指向页面下方不同部分的链接。然而，因为我的固定导航栏的高度是40px，所以每个部分的开头40px都被覆盖了。如何使用HTML或CSS将链接的位置偏移40px？谢谢

Answer 1

您可以尝试将"dummy"锚点绝对定位在每个部分顶部上方40像素处。您可以为它们提供零宽度/高度和隐藏可见性，以确保这些锚点不会影响页面的显示方式。当用户单击固定导航栏中的一个链接时，窗口将滚动到虚拟锚点的顶部，比实际部分的开头高出40像素。

示例HTML:

<div class="navbar">
<a href="#anchor1">Anchor 1</a>
<a href="#anchor2">Anchor 2</a>
<a href="#anchor3">Anchor 3</a>
</div>
<div class="section">
<span id="anchor1" class="anchor"></span>
Section Content
</div>
<div class="section">
<span id="anchor2" class="anchor"></span>
Section Content
</div>
<div class="section">
<span id="anchor3" class="anchor"></span>
Section Content
</div>​

示例CSS:

body {
padding-top: 40px;
}
.navbar {
position: fixed;
width: 100%;
height: 40px;
top: 0;
left: 0;
z-index: 10;
border-bottom: 1px solid #ccc;
background: #eee;
}
.section {
position: relative;
}
.anchor {
display: block;
position: absolute;
width: 0;
height: 0;
z-index: -1;
top: -40px;
left: 0;
visibility: hidden;
}

有关工作示例，请参见http://jsfiddle.net/HV7QL/

编辑：CSS3还包括:target伪类，该类适用于其id已被文档中链接的href或URL的哈希值引用的元素。您可以在:target的顶部应用40像素的填充，该填充将仅应用于用户从固定导航栏中选择的部分。

示例CSS:

.section:target {
padding-top: 40px;
}

这在语义上比上面描述的方法更干净，但在旧的浏览器上不起作用。

工作示例：http://jsfiddle.net/5Ngft/

Answer 2

我今天偶然发现了这个问题，所以我已经考虑了一段时间，但我想我刚刚找到了一个解决方案：

向要跳转到的元素添加一个padding-top: 40px; margin-top: -40px。负边距取消了填充，但浏览器仍然认为元素的顶部比实际高40px(因为事实上它是，只有它的内容开始得更低)。

不幸的是，这可能会与已经设置的边距和填充相冲突，如果你在目标元素上使用背景，这会把一切都搞砸。

我会看看我是否可以解决这个问题，并发布一个jsfiddle，但与此同时，至少有一个基本的答案：)

编辑：我以为我有一个后台解决方案，但它不起作用。再次删除。

最终编辑：如果你知道包装元素的背景颜色，它就会起作用。在我的例子中，我知道文本是在白色背景上，但标题是银色背景。为了防止标题在我们设置的额外填充上有背景，我把它放在前面的一个伪元素上：

#three:before { 
content: " ";
background: white;
display: block;
margin-top: -40px;
padding-top: 40px;
}

这样，额外的填充物又有了白色背景，但只有当你已经知道它需要什么背景时，这才有效。例如，将其设置为透明将显示标题本身的基本背景，而不是文章的背景。

jsFiddle：http://jsfiddle.net/Lzve6/标题一是你遇到问题的默认标题。标题二是我的第一个解决方案，保证可以在几乎所有浏览器上使用标题三是使用:before伪元素，可能在较旧的浏览器上不起作用。