position: sticky 不生效主因是父容器缺乏滚动上下文或存在 transform/filter 等属性；z-index 需配合定位元素及堆叠上下文生效；滚动抖动多因动态重排，应优先用 CSS 控制尺寸变化。
position: sticky; 不生效的常见原因
直接写 position: sticky; 和 top: 0; 却没反应？大概率是父容器“挡住了”。sticky 的行为依赖于最近的**有滚动约束的祖先容器**（比如设置了 overflow: hidden/auto/scroll，或本身就是 viewport）。如果导航栏的父元素高度不够、没有滚动上下文，或者父元素用了 transform / filter / will-change 等属性，就会让 sticky 失效。
检查点清单：
- 确保导航栏的**直接父容器**没有
transform、perspective或filter（哪怕值是none） - 父容器不能是
display: flex或grid容器且自身高度被压缩（例如没设min-height，导致父高度为 0） - 导航栏本身不能有
float、clear或display: inline-block（需保持block或flex等常规流内行为） -
top值必须明确指定（top: 0可以，但top: auto不行）
z-index 生效的前提条件
z-index 只对**定位元素**（position 为 relative、absolute、fixed 或 sticky）起作用。但光有 position: sticky 不够——它还必须处于一个“堆叠上下文”中，且该上下文未被更高层的祖先截断。
典型踩坑场景：
立即学习“前端免费学习笔记（深入）”；
- 导航栏父容器设置了
z-index: 1且position: relative，结果导航栏被盖住（父容器创建了新堆叠上下文，子元素的z-index相对于父级计算） - 页面顶部有
position: fixed的 banner，但没设z-index，而导航栏设了z-index: 10，结果 banner 仍压在上面（因为fixed元素默认堆叠层级高于sticky，需显式提升 banner 的z-index） - 使用了 CSS-in-JS 或 Shadow DOM，样式隔离导致
z-index作用域失效
最小可靠写法（含兼容性兜底）
以下代码能覆盖绝大多数现代浏览器（Chrome 56+、Firefox 59+、Safari 6.1+），并避免常见陷阱：
header {
position: -webkit-sticky; /* Safari 6.1–9 */
position: sticky;
top: 0;
z-index: 100;
background: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/ 确保父容器不破坏 sticky 行为 /
body > header {
/ 避免 body 上有 transform/filter /
}
/ 如果导航栏在 .container 内，确保 container 没有 transform /
.container {
/ 不要写 transform: translateZ(0); /
/ 不要写 filter: blur(0); /
}
注意：z-index: 100 是保险值，但实际只需比页面其他内容高即可；若页面已有 z-index: 999 的弹窗，这里至少得写 1000。
滚动时抖动或跳变怎么办
这是 sticky 最隐蔽的问题：当导航栏高度随滚动动态变化（比如 logo 缩小、文字变小）、或内部元素触发重排（如 JS 修改 padding），会导致浏览器反复计算粘性位置，视觉上出现“卡顿”或“跳一下”。
解决方案优先级：
- 用
will-change: transform提前告知浏览器该元素将频繁变化（但别滥用，否则内存开销上升） - 把尺寸变化逻辑从 JS 改为纯 CSS（例如用
@media或:hover控制，而非监听scroll事件改 class） - 如果必须 JS 控制，用
requestAnimationFrame节流，并只修改transform或opacity这类合成属性 - 检查是否启用了
overscroll-behavior: contain在 body 上——某些安卓 WebView 下会干扰 sticky 行为
真正难调的不是怎么写 sticky，而是怎么让它不和页面里其他定位、动画、滚动监听逻辑互相打架。尤其在复杂 SPA 里，一个第三方 UI 库悄悄给 body 加了 transform，就能让整个导航栏失效。
