我已经使用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/ – 但是在这种情况下,背景上可能会有问题,因为该块在顶部物理扩展.
原文地址:https://www.jb51.cc/css/217153.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。