css锚点定位被顶部固定导航栏遮住的解决方案

标题 css锚点定位被顶部固定导航栏遮住的解决方案

很多网站都有一个固定在上方的导航栏 方便用户搜索和跳转到其他页面。

同时为了方便用户浏览长文档 都会加上目录 点击段落标题跳转到段落所在的位置

如图所示：

如果使用锚点实现目录的跳转会遇到 fixed 导航栏遮住了标题的问题。

1. 锚点定位机制

如果没有滚动条 锚点失效。

如果有滚动条 滚动条滚动到地址 hash （地址 # 号后面的内容）对应的锚点元素padding-box上边缘位置。

2. 解决方案

示例

示例源码

示例在线预览

（1）padding+margin

padding影响锚点元素的定位 margin不影响锚点元素的定位。所以使用padding调整锚点元素跳转后的位置 使用margin抵消padding对布局的影响。

1.出现的时间、地点不同

.first { padding-top: 60px; margin-top: -60px; } 优点

此方案无需添加额外的元素 直接使用 css 可解决问题。

缺点

当标题的文档层级和段落的文档层级不一致时会导致遮盖其他元素。

例如：标题使用了 relative 定位提升了文档层级。会出现鼠标无法选中标题上方被布局遮挡的段落 从而导致无法复制文档。

（2）用span或a标签作为锚点元素

非替换内联元素的padding不影响布局 但可以影响锚点位置。

2. require/exports 是运行时动态加载 import/e