15

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

4

2 回答 2

14

您可以尝试将“虚拟”锚点绝对定位在每个部分顶部上方 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/

于 2012-11-25T21:55:47.237 回答
9

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

将 a 添加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伪元素，可能不适用于旧浏览器。

于 2012-11-25T21:42:14.483 回答