sticky定位失效主因是父容器缺乏滚动上下文或非static定位上下文，且未设top/bottom值；flex/grid父容器需align-items:start；transform等会创建新包含块；overflow:auto使sticky仅在局部生效；iOS Safari存在滚动和键盘兼容问题。
sticky 定位失效的常见原因
元素设了 position: sticky 却不粘住，大概率是父容器没设置「有高度的滚动上下文」或「非 static 的定位上下文」。sticky 不是独立生效的，它依赖最近的、有滚动行为的祖先容器，并且该祖先不能是 position: static（默认值）——但注意，static 本身不阻止 sticky，真正卡住的是：父元素没有形成块级格式化上下文（BFC）或被裁剪（overflow: hidden|auto|scroll），同时未设定明确的 top / bottom 偏移值。
-
top或bottom必须显式设置（哪怕为0），否则等同于position: relative - 父容器不能是
display: flex或display: grid且未设align-items: start—— 这会导致子项基线对齐，破坏 sticky 的“进入视口”判断 - 若父容器有
transform、filter、will-change，会强制创建新层叠上下文和新的包含块，使 sticky 相对于该容器计算而非视口，容易意外失效
sticky 和 overflow:auto 容器一起用的陷阱
当 sticky 元素放在一个带 overflow: auto 的内部容器里（比如侧边栏里的导航栏），它的“粘性”只在该容器内生效，而不是整个页面视口。这是 sticky 的设计机制：它相对于最近的「滚动祖先」定位，而不是 window。
- 想让标题在局部面板内粘住？没问题，确保父容器有固定高度 +
overflow: auto+top: 0 - 想让导航栏全局粘顶？那它必须脱离任何局部滚动容器，直接放在
body下，或至少父级不能有overflow裁剪 - Chrome 120+ 对嵌套 sticky 支持更好，但 Safari 仍可能在
overflow: auto+flex组合下跳帧或延迟响应
替代方案：何时该放弃 sticky 改用 JS 监听 scroll
sticky 处理不了动态高度变化、复杂交互动画、或需要精确控制“吸顶/释放”时机的场景。比如：滚动到某区域后才触发粘性，或粘住时缩放 logo、切换背景色。
- 需要响应
scroll事件做 class 切换？用IntersectionObserver比onscroll更轻量且防抖 - 要兼容 IE 或老版 Safari（
sticky支持始于 Safari 6.1 / iOS 6.1）？得降级为position: fixed+ JS 计算top值 - 如果 sticky 元素内部有
height: 100%或min-height: 100vh，可能因高度塌陷导致定位错乱，此时 JS 控制更可控
const header = document.querySelector('.js-sticky-header');
const observer = new IntersectionObserver(
([e]) => {
header.classList.toggle('is-pinned', !e.isIntersecting);
},
{ threshold: 0, rootMargin: '-1px 0px 0px 0px' }
);
observer.observe(document.querySelector('.trigger-section'));
移动端 iOS Safari 的 sticky 异常表现
iOS Safari 对 sticky 的实现存在两个经典问题：一是快速滚动时“粘不住”，二是键盘弹出后 sticky 元素位置错乱（尤其表单页）。根本原因是 WebKit 将软键盘唤起视为 viewport 缩放/重排，而 sticky 未及时重计算。
- 避免在
上方直接放 sticky 导航；可加一层 wrapper 并监听focusin/focusout动态切position: fixed - 不要给 sticky 元素设
backface-visibility: hidden或-webkit-overflow-scrolling: touch—— 这些会干扰渲染管线 - 测试时务必真机连接 Safari 开发者工具，模拟器无法复现多数滚动抖动问题
position: sticky，而是判断这个“上下文”是否存在、是否稳定、是否被其他 CSS 特性悄悄覆盖。
