如何抵消固定导航栏带我的位置？

Question

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

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

我今天碰巧遇到了这个问题,所以我已经考虑了一下,但我想我刚刚找到了一个解决方案:

将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伪元素,可能不适用于旧浏览器.