我已经使用css来制作一个“粘性标题”,它始终在页面顶部显示,而其他内容放置在其下方.
在标题中我有一些内部链接.问题是,当点击链接时,页面被滚动,以便目标位于页面的顶部 – 由我的粘性标题隐藏 – 而不是在其下方.
在标题中我有一些内部链接.问题是,当点击链接时,页面被滚动,以便目标位于页面的顶部 – 由我的粘性标题隐藏 – 而不是在其下方.
有什么建议如何解决这个问题？
CSS：
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3.5em;
padding:0;
margin: 0;
}
#container {
width: 100%;
margin: 3.5em 0 0 0;
padding: 0;
overflow:auto;
}
#content {
padding: 0 4em;
margin: 0;
}
HTML：
<body>
<div id="header">
<div id="content">
<p>
<a href="#xyz">XYZ</a>
</p>
</div> <!--end content-->
</div> <!--end header-->
<div id="container">
<div id="content">
<p>A lot of text.</p>
<a name="xyz"></a>
<p>A lot of text</p>
</div><!--end content-->
</div><!--end container-->
</body>
解决方法
首先,最好使用id而不是名称的块 – 这是更标准的方法.
然后,将类添加到锚点,然后使其具有绝对位置,并将其与顶部高度相等的负顶边距移动.
看这个小提琴：http://jsfiddle.net/kizu/gfXJJ/
或者,对于支持伪元素的浏览器,您可以添加具有所需高度的浏览器,并通过负顶部边距来补偿它的高度,因此它将作为您创建链接的块的开始.这样做可以将id添加到已经存在的元素中,而不是创建额外的元素.
这是一个带伪元素的版本：http://jsfiddle.net/kizu/gfXJJ/2/
或者,您可以为id本身添加顶部填充和负边距：http://jsfiddle.net/kizu/gfXJJ/2/ – 但是在这种情况下,背景上可能会有问题,因为该块在顶部物理扩展.
