我在我的网站上有一个固定的导航栏,保持在顶部,带有链接,使我进入页面的不同部分.但是,由于我的固定导航栏的高度为40像素,所以每个部分的开头40像素被覆盖.我如何使用
HTML或CSS来抵消40px的位置.
谢谢.
谢谢.
解决方法
您可以尝试绝对定位每个部分顶部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;
}
这比上述方法语义上更清洁,但在旧版浏览器上不起作用.
