纯CSS页内锚点+动态高度粘性头部偏移问题：非JS修复方案？

可以通过你已有的.sticky类，结合CSS兄弟选择器动态修改锚点元素的scroll-margin-top值，完美适配头部两种状态的高度，无需新增JavaScript代码。

问题根源 #

你当前设置的scroll-margin-top是固定值，无法匹配头部**非粘性（高度更高）和粘性（高度更矮）**两种状态的高度差，导致初始非粘性状态下点击锚点时，偏移量错误。

具体实现 #

1. 确保HTML结构：让头部元素与承载锚点区块的容器（比如<main>）保持兄弟关系，这样CSS选择器能正确关联状态。
2. 默认偏移设置：给锚点目标元素设置默认scroll-margin-top，值等于头部非粘性时的完整高度。
3. 粘性状态下的偏移覆盖：利用.sticky类结合兄弟选择器，当头部切换为粘性状态时，将scroll-margin-top改为粘性头部的高度。

代码示例

/* 头部基础样式 */
.header {
  height: 100px; /* 非粘性时的高度 */
  position: sticky;
  top: 0;
  transition: height 0.3s;
  background: #fff;
}
/* 粘性状态下的头部样式 */
.header.sticky {
  height: 50px; /* 粘性时的高度 */
}

/* 平滑滚动全局设置 */
html {
  scroll-behavior: smooth;
}

/* 默认锚点偏移：适配非粘性头部 */
main section {
  scroll-margin-top: 100px;
}

/* 头部粘性时，调整锚点偏移 */
.header.sticky ~ main section {
  scroll-margin-top: 50px;
}

<header class="header">
  <nav>
    <a href="#section-a">Section A</a>
    <a href="#section-b">Section B</a>
    <a href="#section-c">Section C</a>
  </nav>
</header>
<main>
  <section id="section-a">
    <h2>Section A</h2>
    <!-- 区块内容 -->
  </section>
  <section id="section-b">
    <h2>Section B</h2>
    <!-- 区块内容 -->
  </section>
  <section id="section-c">
    <h2>Section C</h2>
    <!-- 区块内容 -->
  </section>
</main>

效果说明 #

• 初始页面加载时，头部未触发粘性状态，scroll-margin-top为头部非粘性高度，点击锚点会自动留出足够空间，避免内容被头部遮挡。
• 滚动页面触发头部粘性后，CSS选择器会自动修改scroll-margin-top为粘性头部高度，此时点击导航链接依然能正确偏移。

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