scroll-padding-top 在 sticky 导航栏下无效，因其静态偏移不响应 sticky 动态占位变化；应改用目标元素上的 scroll-margin-top，并确保其值等于导航栏视觉总高度。
scroll-padding-top 在 position: sticky 导航栏下基本无效，别硬套——它无法响应 sticky 的动态占位变化，强行写只会导致刚加载时准、一滚动就遮挡。
为什么 sticky + scroll-padding-top 会失效
sticky 元素在滚动中“吸附”到顶部，但它的文档流高度会随滚动状态切换（未吸顶时占位高，吸顶后视觉上覆盖但 DOM 高度未重算）；而 scroll-padding-top 是静态偏移，浏览器只按初始渲染时的 html 滚动容器计算一次，不会监听 sticky 状态变化。结果就是：锚点跳转终点始终按初始布局偏移，一旦 sticky 激活，目标元素顶部就被盖住。
- DevTools 里看到导航栏 computed height 是 64px，但实际吸顶后遮挡区域可能因 box-shadow 或 transform 延伸到 72px
- 即使你用 JS 动态改
html { scroll-padding-top: ... }，浏览器也不会重新触发锚点滚动重定位 - Safari 和旧版 Chrome 对 sticky + scroll-padding 的组合支持极不稳定，部分版本直接忽略
该用 scroll-margin-top 替代，且必须加在目标元素上
scroll-margin-top 作用于锚点目标本身（如 section#about、h2[id]），定义的是“这个元素被滚动到视口时，顶部停在哪”，行为更贴近 sticky 的动态逻辑。
- 写法必须是：
section#faq { scroll-margin-top: 64px; }—— 不是body，也不是nav - 值必须等于 sticky 导航栏的**视觉总高度**，包括
padding-top、border-top-width、box-shadow向上扩散部分，用 DevTools 的 Computed 面板查最准 - 移动端高度变化（如从 64px 折叠为 48px）时，不能写死，要用媒体查询或
clamp(48px, 5vw, 64px) - 目标元素必须有
id或name属性，否则浏览器根本不识别它是锚点
遇到 overflow: hidden 或 flex 父容器时 scroll-margin-top 失效怎么办
如果目标元素父容器设了 overflow: hidden，或目标本身是 display: flex / inline 元素，scroll-margin-top 可能被忽略——因为它要求目标是流内块级元素且未脱离文档流。
- 降级方案：用
padding-top+margin-top: -Xpx组合，数值严格相等，且目标不能是inline - 写法示例：
h2[id] { scroll-margin-top: 64px; padding-top: 64px; margin-top: -64px; } - 注意 Safari scroll-margin-top，且仅在
scroll-behavior: smooth容器内生效；若页面禁用平滑滚动，该属性完全不触发 - 避免用
transform: translateY()调整目标位置——它创建新包含块，破坏 scroll-margin 的定位上下文
真正稳的解法：换 fixed，别和 sticky 死磕
如果你控制得了导航栏样式，position: fixed 是唯一能让 scroll-padding-top 和 scroll-margin-top 行为可预测的方案。
-
fixed导航栏高度恒定、脱离文档流、不推挤后续内容，所有滚动偏移策略都能对齐 - 写
html { scroll-padding-top: 64px; }就能全局生效，无需给每个锚点加scroll-margin-top - 若必须用 sticky（比如要保留其文档流占位语义），那就放弃 CSS 偏移，改用 JS 手动滚动：
target.offsetTop - stickyEl.offsetHeight，并监听 resize 和 scroll 动态更新高度
最容易被忽略的点：所有基于固定数值的方案（64px、48px）都假设导航栏高度静止——但 banner 插入、登录态变化、响应式折叠都会让它变，这时候靠 CSS 变量或 JS 动态读取 offsetHeight 才是真稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
