粘性导航（Sticky nav）锚点定位遮挡问题求助

这个问题的核心是浏览器默认锚点定位会让目标元素顶部对齐视口顶部，但粘性导航固定在顶部后，会直接挡住内容区域。下面是几种可靠的解决方法：

方法一：使用CSS scroll-margin-top（推荐，现代浏览器支持） #

直接给锚点目标元素设置scroll-margin-top，值等于导航栏的总高度（包含padding、border等）。你的导航栏上下padding为10px，加上默认行高，可先设为60px（实际高度不同可自行调整）。

修改后的CSS代码：

* {
  scroll-behavior: smooth;
}

nav {
  position: sticky;
  top: 0;
  right: 0;
  padding: 10px 0;
  border: 1px solid red;
  background: white; /* 加上背景色，避免内容透过导航栏显示 */
}

ul {
  display: flex;
  align-items: center;
  gap: 30px;
}

li {
  list-style: none
}

p {
  margin-bottom: 300px;
  scroll-margin-top: 60px; /* 关键：为导航栏预留高度 */
}

解释：scroll-margin-top会给滚动定位的元素顶部预留指定间距，锚点跳转后，元素顶部会自动停在导航栏下方。

方法二：添加隐形锚点占位元素（兼容旧浏览器） #

如果需要适配不支持scroll-margin-top的旧浏览器，可以给每个锚点位置添加空占位元素，通过负margin偏移实现无空间占用的定位：

修改后的HTML代码：

<nav>
  <ul>
    <li><a href="#introduce">introduce</a></li>
    <li><a href="#history">history</a></li>
    <li><a href="#maker">maker</a></li>
  </ul>
</nav>

<div id="introduce" class="anchor"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<div id="history" class="anchor"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<div id="maker" class="anchor"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

新增CSS代码：

.anchor {
  display: block;
  height: 60px; /* 与导航栏高度一致 */
  margin-top: -60px; /* 向上偏移，不占用页面实际空间 */
  visibility: hidden;
}

方法三：用padding+负margin调整目标元素 #

直接给目标段落设置padding-top和负margin-top，同样基于导航栏高度调整：

p {
  margin-bottom: 300px;
  padding-top: 60px;
  margin-top: -60px;
}

注意：这种方法可能影响元素上下间距，需根据实际布局微调。

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