如何偏移固定导航栏所指向的位置？

Question

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

Answer 1

您可以尝试将“虚拟”锚点绝对定位在每个部分顶部上方 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 的哈希值引用的元素。您可以将 40 像素的填充应用到

:target

的顶部，该填充将仅应用于用户从固定导航栏中选择的部分。

CSS 示例：

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

这在语义上比上述方法更清晰，但不适用于较旧的浏览器。

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

Answer 2

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

向要跳转到的元素添加

padding-top: 40px; margin-top: -40px

。负边距取消了填充，但浏览器仍然认为元素的顶部比实际高 40px（因为事实上确实如此，只是它的内容开始较低）。

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

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

edited：我以为我有一个背景解决方案，但它不起作用。又删了。

最终编辑： 如果您知道包装元素的背景颜色，它会起作用。在我的示例中，我知道文本位于白色背景上，但标题具有银色背景。为了防止标题在我们设置的额外填充上有背景，我将其放在前面的伪元素上：

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

通过这种方式，额外的填充再次具有白色背景，但这仅在您已经知道它需要什么背景时才有效。例如，将其设置为透明将显示标题本身的底层背景，而不是文章的底层背景。

jsFiddle：http://jsfiddle.net/Lzve6/ 标题一是您遇到问题的默认标题。 标题二是我的第一个解决方案，保证适用于几乎所有浏览器 标题三使用

:before

伪元素，可能不适用于 旧版浏览器。