safari 旧版本（ios 12.2及更早、macos mojave及更早）中position: sticky完全不生效，非前缀可修复；可靠支持始于safari 13.1（ios 13.4），此前需js fallback并注意overflow截断、fixed偏移及兼容性验证。
sticky 元素在 Safari 旧版本中完全不生效
iOS 12.2 及更早的 Safari、macOS Mojave 及更早系统中的 Safari，对 position: sticky 的支持是残缺的——即使写了 top 或 bottom，元素也不会粘住。这不是前缀能解决的问题，而是引擎压根没实现。
判断是否真正在用 sticky：打开 DevTools → 检查元素 → 看 computed 样式里 position 是否为 sticky，且 top 值被识别（而非降级为 static）。若显示 static，说明已被浏览器忽略。
- 不能依赖
-webkit-sticky：它从未是标准前缀，加了也无效 - iOS 12.1 是已知最早稳定支持 sticky 的版本，但需确保父容器有明确高度或非
overflow: hidden - 若必须兼容 iOS 11/12，fallback 方案只能是 JS 监听 scroll + 切换
position: fixed
sticky 在 overflow 容器内失效的常见原因
position: sticky 要求最近的「滚动祖先」不能有 overflow: hidden、auto 或 scroll，否则粘性行为会被截断。这在嵌套卡片、Modal、React 虚拟滚动列表里高频出现。
典型表现：元素滚动到顶部后“卡半截”，或根本不动。检查其所有父级直到 body，只要某一层带 overflow: hidden 且高度受限，sticky 就会失效。
立即学习“前端免费学习笔记（深入）”；
- 修复方式：把
overflow移到更外层（如 body），或改用overflow: clip（仅 Chrome 111+ 支持） - 临时规避：给 sticky 元素的直接父容器加
transform: translateZ(0)，可强制创建新层叠上下文，有时能绕过 overflow 截断（但非标准解法） - 注意
will-change: transform同样可能干扰，慎用
sticky fallback 到 fixed 时的定位偏移问题
当用 JavaScript 模拟 sticky（监听 scroll 后切 position: fixed），最常出错的是 top 值计算错误，导致元素“跳一下”或脱离原位置。
关键不是简单设 top: 0，而是要还原它原本在文档流中的 offsetTop，并减去页面滚动距离：
const el = document.querySelector('.header');
const offsetTop = el.getBoundingClientRect().top + window.scrollY;
window.addEventListener('scroll', () => {
if (window.scrollY >= offsetTop) {
el.style.position = 'fixed';
el.style.top = '0';
el.style.width = el.offsetWidth + 'px'; // 防止因脱离文档流变宽
} else {
el.style.position = '';
el.style.top = '';
el.style.width = '';
}
});- 必须动态设置
width，否则 fixed 后宽度可能收缩（尤其 flex 子项） - 避免用
getBoundingClientRect().top在 scroll handler 里反复调用，性能差；应提前缓存 offsetTop - 移动端要注意
visualViewport缩放导致的 offset 偏移，必要时监听resize重算
Can I Use 数据之外的真实兼容边界
caniuse.com 显示 “Safari 6.1+ 支持 sticky”，但实际从 Safari 6.1 到 Safari 9，position: sticky 仅在部分场景下工作（比如只支持 top，不支持 bottom；或要求父元素 height 固定）。真正可靠的起点是 Safari 13.1（iOS 13.4/macOS Catalina）。
这意味着：如果你的用户仍有 5% 以上使用 iOS 12 或更早系统（如企业内网 iPad），就不能把 sticky 当作默认行为，而应默认降级，再用 @supports (position: sticky) 提升体验：
@supports (position: sticky) {
.header {
position: sticky;
top: 0;
}
}
/* 默认样式就是 static 或 relative，不依赖 sticky */别忘了：@supports 本身在 IE 和老 Android Browser 中不支持，所以 fallback 必须是无 JS、无新特性也能正常渲染的布局。
最麻烦的不是写 fallback，而是测试——真机上 iOS 12.1 和 iOS 12.4 对同一段 sticky 的表现可能不同，得逐版本验证。
