position: sticky + html { scroll-padding-top } 是现代浏览器下最稳、最轻量的解法；需将 scroll-padding-top 写在 html 上，准确计算导航视觉高度，并避开 overflow、Flex/Grid、transform 等 sticky 失效陷阱。
直接结论：用 position: sticky + html { scroll-padding-top } 是现代浏览器下最稳、最轻量的解法；但必须写对位置、算准高度、避开 sticky 失效陷阱。
为什么 scroll-padding-top 必须写在 html 上
浏览器滚动锚点（href="#about"）的终点计算，只认根滚动容器——也就是 html 元素。写在 body 或目标元素（如 #about）上，Safari 和旧 Edge 直接忽略，Chrome 虽部分支持但行为不一致。
-
html { scroll-padding-top: 64px; }✅ 生效，全局锚点跳转自动上移 64px -
body { scroll-padding-top: 64px; }❌ Safari 中无效，页面跳转后内容仍被盖住 -
#about { scroll-padding-top: 64px; }❌ 完全无作用，该属性不作用于目标元素本身
怎么算出准确的“视觉总高度”给 scroll-padding-top
别只看导航栏的 height 值。它实际占据的垂直空间 = height + padding-top + border-top-width + box-shadow 的垂直扩散（尤其 spread 值大的阴影），甚至 transform: translateY(-100%) 这类隐藏逻辑也会让 DOM 高度失真。
- 打开 DevTools → 选中导航栏 → 切到 Computed 面板，手动加总：
height、padding-top、border-top-width、box-shadow的垂直分量 - 移动端折叠后变矮？别写死
64px，用媒体查询：@media (max-width: 768px) { html { scroll-padding-top: 48px; } } - 推荐抽成 CSS 变量：
:root { --nav-height: 64px; }，再写html { scroll-padding-top: var(--nav-height); }
position: sticky 不生效的三个高频原因
不是你没写 top，而是某层祖先悄悄截断了粘性链。用 DevTools 逐层检查 computed styles，重点盯这三类：
立即学习“前端免费学习笔记（深入）”；
- 任意祖先设了
overflow: hidden、overflow: auto或overflow: scroll—— 这会创建新的粘性边界，sticky 只在该容器内起效 - 父容器是 Flex/Grid，但没给导航栏设
min-height，或父项align-items: stretch导致高度算成 0 - 导航栏自身或某层父元素用了
transform、filter或will-change—— 这些强制创建新层叠上下文，直接禁用 sticky
另外，top 必须显式设置单位（top: 0 合法，top: 0px 更明确），且它的含义是“距原始位置顶部多少像素才开始吸附”，不是“离视口顶部距离”。
scroll-padding-top 和 scroll-margin-top 别混用
两者都影响锚点滚动终点，但机制不同：前者是全局偏移（作用于根滚动容器），后者是单个元素的滚动外边距。如果同时设置，浏览器会把两个值相加，导致目标元素下移过多、留白过大。
- 优先用
html { scroll-padding-top }：一劳永逸，适配所有锚点 - 只有当你无法控制
html样式（比如嵌入第三方 iframe），才退而求其次，在每个目标元素上单独加scroll-margin-top - 绝对不要在同一个项目里既设
html { scroll-padding-top }又给#about加scroll-margin-top
真正容易被忽略的是：吸顶导航若用了 position: sticky，而高度又随滚动动态变化（比如菜单展开/收起），scroll-padding-top 是静态值，不会响应变化——此时要么改用 position: fixed + 动态 body padding-top，要么放弃 CSS 方案，用 JS 精确控制 scrollIntoView 的 offsetTop。
