Sticky定位需谨慎兼容：现代浏览器基本支持但IE全不支持，Safari 15.4、Chrome 56、Firefox 32前版本亦失效；应先写fixed fallback再用@supports包裹sticky规则；注意iOS Safari对table子元素、transform等属性及overflow设置的限制；移动端降级需补padding防布局断裂；微信X5内核建议媒体查询强制降级。
Sticky 定位的原生支持范围很明确
现代主流浏览器基本都支持 position: sticky，但「支持」不等于「开箱即用」——Safari 15.4 之前、Chrome 56 之前、Firefox 32 之前，以及所有版本的 IE，都会直接忽略该声明，退化为 position: static。这意味着：没做降级时，元素会彻底“掉出”预期位置，不是偏一点，而是完全失效。
@supports 是最轻量可靠的 CSS 兼容检测方式
别用 JS 检测再加类名来兜底，先写好 fallback，再用 @supports 精准覆盖。顺序错了就白忙：
- 先写
position: fixed基础样式（所有浏览器都能认） - 再用
@supports (position: sticky)包裹 sticky 规则，只对支持者生效 - 绝对不要反过来写（先 sticky 再 fallback），不支持的浏览器会跳过整条规则
示例：
.header {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
@supports (position: sticky) {
.header {
position: sticky;
/ top 和 z-index 可复用，sticky 会继承 /
}
}
iOS Safari 和 Android Chrome 的隐藏陷阱
即使浏览器标称支持 sticky，实际表现仍可能翻车：
立即学习“前端免费学习笔记（深入）”；
- iOS Safari 对
子元素（
、 ）完全不生效，必须改用 布局- 父容器设了
transform、filter或will-change，会创建新层叠上下文，直接禁用 sticky（Chrome/Firefox/Safari 一致，但 Safari 更敏感）- 父级或祖先有
overflow: hidden、auto或scroll，sticky 就会找不到滚动锚点——尤其在局部滚动容器（如带-webkit-overflow-scrolling: touch的 iOS 滚动区）里必挂移动端降级要防布局断裂，不能只靠 fixed
直接上
position: fixed很容易让后续内容被遮住，必须同步修复文档流空缺：- 给 sticky 元素加
fixed类的同时，给它后面的内容区域加等高padding-top（比如padding-top: 60px） - 高度不固定时（如响应式导航栏），得用 JS 动态读取并注入内联
style，不能写死像素值 -
微信内置浏览器（X5 内核）对 sticky 支持极不稳定，建议用媒体查询 +
@media (max-width: 768px)强制降级
真正难的不是让 sticky “看起来动了”，而是让它在各种滚动上下文、各种层叠环境、各种内核差异下都不破坏页面结构。兼容性问题从来不是“能不能用”，而是“在哪种组合下会悄悄失效”。
- 父容器设了
