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 修复），仍需人工校验降级后的视觉与交互一致性。