摘要：一般常见于文档页面，复现如下点击右侧的目录，快速定位至，结果被遮住为方便观察，设置。代码给每个锚点增加属性解决后效果纠正偏移后，能准确定位，且不影响页面布局。修复后的代码原创说明此篇文章记录于年月日实际项目开发中遇到的问题。
背景 复现
当页面中带有position:fixed的header时，通过id进行定位时，一般会有偏差。一般常见于文档页面，复现如下：
点击右侧的目录，快速定位至title2，结果被header遮住（为方便观察，header设置opacity:0.95）。
期望能实现准确定位。
demo代码：
解决问题 思路Fixed header anchor offset
给每个anchor设置偏移，纠正这个偏差。
代码给每个锚点h3增加css属性：
#app #main h3::before {
content: "";
display: block;
height: var(--header-height);
margin-top: calc(var(--header-height) * -1);
visibility: hidden;
}
解决后效果
纠正偏移后，能准确定位，且不影响页面布局。
原创说明Fixed header anchor offset
此篇文章记录于2019年8月1日实际项目开发中遇到的问题。
参考自： fixed-page-header-overlaps-in-page-anchors
转载请注明出处，谢谢。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116284.html
阅读 1181·2021-09-22 15:24
阅读 2285·2019-08-30 15:44
阅读 2613·2019-08-30 10:55
阅读 3354·2019-08-29 13:25
阅读 1638·2019-08-29 13:09
阅读 1391·2019-08-26 14:05
阅读 1378·2019-08-26 13:58
阅读 1983·2019-08-26 11:57
