固定定位导航栏下锚点跳转时section标题被遮挡如何解决

问题原因 #

锚点跳转的默认逻辑是将目标元素的顶部与浏览器视口顶部对齐，而fixed定位的导航栏脱离了正常文档流，不占据页面空间，因此跳转后目标section的顶部会被导航栏遮挡。你之前给section加margin-top无效的原因是：锚点对齐的是section盒模型的外边缘（即margin的上边界），依然会对齐到视口顶部，还是会被遮挡。

解决方案 #

方案1：使用scroll-padding-top（推荐，兼容性好）

直接在根元素设置滚动偏移量，浏览器会自动在锚点跳转时预留对应高度避免遮挡，不需要修改原有布局结构：

:root {
  /* 取值和导航栏高度保持一致即可 */
  scroll-padding-top: 4rem;
}

方案2：使用padding-top + 负margin-top兼容老浏览器

如果需要兼容极低版本浏览器，可以给section添加如下样式，让锚点对齐位置上移，同时内容下移避开导航栏：

section {
  /* 偏移量和导航栏高度一致 */
  padding-top: 4rem;
  margin-top: -4rem;
  /* 原有section的其他样式保留不变 */
}

如果section设置了背景色，该方案也不会出现背景断裂的问题，padding-top会自动将背景区域向上延伸填充偏移空间。

内容的提问来源于stack exchange，提问作者Shail