Sticky定位需降级处理：先用position: fixed兜底，再用@supports检测并覆盖为sticky；不支持时可用JS检测加类名模拟，但须修复fixed导致的布局断裂问题。
Sticky 定位（position: sticky）在现代浏览器中支持良好，但 IE 完全不支持，iOS Safari 旧版本（如 iOS 9.3 及更早）、Android Browser 和部分 UC / QQ 浏览器内核也存在兼容性问题。直接使用 sticky 而不做降级，会导致元素在不支持的环境中表现为 static（即完全失效），破坏布局预期。因此需结合检测与 fallback 方案，让不支持的环境退回到 position: fixed 或 JavaScript 模拟行为。
用 @supports 检测并分层声明
@supports 是最轻量、推荐的 CSS 原生降级方式，可精准识别是否支持 sticky，避免影响支持环境：
- 先写
fixed基础样式（适用于所有浏览器） - 再用
@supports (position: sticky)覆盖为sticky，仅对支持者生效 - 注意：不要反过来写（先 sticky 再 fallback），因为不支持时会忽略整条规则
示例：
header {
position: fixed; /* 所有浏览器兜底 */
top: 0;
width: 100%;
z-index: 100;
}
@supports (position: sticky) {
header {
position: sticky;
top: 0;
/ fixed 的 top/z-index 等仍可保留，sticky 会继承 /
}
}
JavaScript 检测 + 动态切换类名
当需要更精细控制（比如只在滚动到某区域才“粘住”，或兼容老 iOS 需监听 scroll 事件模拟 sticky 行为）时，可用 JS 检测并添加 class：
立即学习“前端免费学习笔记（深入）”；
- 用
CSS.supports('position', 'sticky')判断原生支持 - 不支持时，给元素加
js-fallback-fixed类，CSS 中定义其为fixed - 若需模拟滚动粘性（如 iOS 9），可监听
scroll，动态切换fixed/relative并修正top
注意：纯 JS 模拟 sticky 易引发性能问题，建议节流 + 使用 getBoundingClientRect() 判断临界位置，而非依赖 scrollTop。
避免 fixed 降级带来的布局断裂
fixed 会脱离文档流，常导致后续内容上移、页面高度塌陷等问题，必须主动修复：
- 为
fixed元素的父容器或紧邻兄弟元素设置padding-top或margin-top，值等于 fixed 元素高度 - 若高度不固定（如响应式导航栏），可用 JS 动态计算并注入内联样式
- 慎用
body { padding-top: Xpx }，可能影响全站布局；优先作用于局部容器
构建时自动补全（可选增强）
借助 PostCSS 插件（如 postcss-sticky 或 autoprefixer 的扩展配置），可在构建阶段自动为 sticky 规则插入 fixed 备用声明。但需注意：这类插件通常无法智能处理上下文（如是否已设 padding 修复），仍需人工校验降级后的视觉与交互一致性。
