scroll-margin-top不支持直接使用CSS变量，必须用calc(var(--header-height, 48px) + 2px)形式，且需配合响应式重声明和sticky容器正确配置。
为什么scroll-margin-top不能直接用var(--header-height)
因为scroll-margin-top不支持 CSS 变量参与计算（CSS 逻辑属性中仅部分属性支持calc()内嵌变量，而scroll-margin-top在当前所有浏览器中均不支持直接var()），直接写scroll-margin-top: var(--header-height);会被忽略，回退为默认值0。
calc() + 自定义属性是唯一可行的动态方案
必须显式包裹在calc()里，且变量需有 fallback 值，否则整个声明无效：
-
scroll-margin-top只接受长度值（px、rem、vh等），不接受纯变量 - 正确写法：
scroll-margin-top: calc(var(--header-height, 48px) + 2px);——+ 2px不是可选，是强制要求calc()内至少含一个运算符 - fallback 值（
48px）必不可少：若--header-height未定义，整个calc()会失效，导致偏移丢失 - 该方案在 Chrome 115+、Firefox 110+、Safari 16.4+ 均稳定生效；iOS Safari 16.5+ 起修复了早期
scroll-margin与sticky共存的抖动问题
固定表头高度变化时，scroll-margin-top要同步更新
当--header-height通过媒体查询或 JS 动态修改时，scroll-margin-top不会自动重算——它只在样式解析时求值一次。所以：
- 响应式场景下，必须为不同断点重复声明
scroll-margin-top，例如：section { scroll-margin-top: calc(var(--header-height, 48px) + 2px); } @media (max-width: 768px) { section { scroll-margin-top: calc(var(--header-height, 36px) + 2px); } } - JS 修改变量后，需手动触发重排（如
getComputedStyle(el).top）或改用style.scrollMarginTop直写，避免依赖 CSS 变量链 - 不要指望
:root里改一个变量就能全局联动滚动偏移——scroll-margin-top不响应运行时变量变更
真正容易被忽略的细节：父容器overflow和sticky必须共存
即使scroll-margin-top算对了，如果表头本身没粘住，锚点跳转仍会遮挡内容。常见疏漏：
立即学习“前端免费学习笔记（深入）”；
-
th或thead设了position: sticky，但其**最近滚动祖先**（比如.table-container）设置了overflow: hidden，直接废掉sticky行为 -
table元素本身不能作为sticky的容器，必须确保th的父级是tr→thead→ 一个div容器，且该div有overflow-y: auto -
z-index必须显式设置（哪怕只是1），否则在某些 stacking context 下，sticky表头会被内容盖住
