transform: scale会使sticky的top失效，因其仅作用于渲染层而不改变布局尺寸，导致sticky按原始尺寸判断触发位置，视觉上出现偏移；应将scale移至父容器并确保其不创建新滚动上下文，或手动按缩放比修正top值。
为什么transform: scale会让sticky的top失效
浏览器计算 position: sticky 的触发时机，依赖元素在布局树中的原始几何尺寸和滚动容器的可滚动区域。而 transform: scale() 只改变渲染层（paint layer），不改变 layout box —— 这意味着：sticky 仍按缩放前的高度判断“是否到达 top: 20px”，但视觉上元素已变小/变大，导致吸附位置肉眼可见偏移（比如本该贴顶，结果悬空 10px；或提前卡住）。
别直接给sticky元素加scale，改用容器级缩放
最稳妥的做法是把 transform: scale() 从 sticky 元素本身剥离，挪到它的**父容器**上，并确保该父容器不参与 sticky 锚定链：
- sticky 元素自身只写
position: sticky; top: 20px;，不带任何 transform - 它的直接父容器（非 sticky 元素的祖先）设置
transform: scale(0.8); transform-origin: 0 0; - 如果父容器需要 scroll 或 overflow 控制，必须确认它没创建新的滚动上下文（即不能有
overflow: hidden/auto/scroll） - 这样 sticky 逻辑基于原始尺寸运行，视觉缩放由父容器统一承担，两者解耦
真要缩放sticky元素本身？必须同步修正top值
若 DOM 结构锁死、无法调整层级（如第三方图表库强制将 scale 加在 sticky 容器上），则需手动补偿 top 值：
- 用
window.getComputedStyle(el).transform解析 matrix，提取缩放因子sx和sy - 原始
top: 20px应改为top: calc(20px / var(--scale-y))，其中--scale-y是运行时注入的 CSS 变量 - 监听缩放变化（如 viewport resize、zoom 级别切换），动态重设该变量
- 注意：iOS Safari 对
calc()中除法支持不稳定，建议 fallback 到 JS 动态 setStyle
警惕transform-origin对top锚点的影响
如果 sticky 元素或其缩放父容器设置了 transform-origin: center 或其他非左上角值，top 的参照基准会偏移——此时 top: 0 不再对应视口顶部边缘，而是该 origin 点的垂直投影位置。解决方法很直接：
立即学习“前端免费学习笔记（深入）”；
- 强制统一
transform-origin: 0 0（即左上角），避免坐标系错乱 - 若无法修改 origin，则必须用
getBoundingClientRect()获取当前渲染后的真实top值，再结合 matrix 做逆变换，不能硬编码 offset - 尤其注意：某些 UI 框架（如 Ant Design 的
.ant-table-thead）默认加了transform-origin: center，容易成为隐藏雷区
top 数值，而是让 sticky 的判定依据和视觉呈现使用同一套尺度。 
