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

您可以尝试绝对定位每个部分顶部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还包括：目标伪类,其适用于其文档中链接的href引用的id的元素或URL的哈希值.您可以将40像素的填充应用于仅将应用于用户从固定导航栏中选择的部分的目标顶部.

示例CSS：

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

这比上述方法语义上更清洁,但在旧版浏览器上不起作用.

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