答案：position: sticky 失效常见于无滚动父容器、受 transform 等属性干扰、top 未设置或布局影响；需确保父元素有高度和 overflow、避免层叠上下文破坏、正确设置 top 值，并在 flex/grid 中保证可滚动，即可解决大部分问题。
使用 position: sticky 时，元素“粘性”失效是常见问题。它看似简单，但实际行为受多种条件限制。如果设置了 position: sticky 和 top 却没反应，别急着换 JavaScript 实现，先检查以下几个关键点。
1. 父元素是否有滚动容器？
sticky 元素必须在可滚动的容器内才能生效。它依赖于父级或祖先元素的滚动来触发“粘住”效果。
- 如果父元素没有设置固定高度，也没有
overflow: auto或scroll，页面就不会出现局部滚动，sticky 就不会被触发。 - 确保父容器有明确的高度，并开启滚动：
.container {
height: 300px;
overflow-y: auto;
}
.sticky-header {
position: sticky;
top: 0;
}
这样当用户在 .container 内滚动时，.sticky-header 才会在到达顶部时固定。
立即学习“前端免费学习笔记（深入）”；
2. 是否存在 transform、filter 等属性干扰？
某些 CSS 属性会创建新的“层叠上下文”或“包含块”，导致 sticky 失效。
- 如果父元素设置了
transform: translate()、filter、will-change等，会破坏 sticky 的定位参照。 - 例如下面这段代码会让 sticky 失效：
.parent {
transform: translateZ(0); /* 这会导致 sticky 不工作 */
}
解决方法：移除这些属性，或把 sticky 元素移到受影响的父级之外。
3. top 值设置是否正确？
top 是 sticky 触发粘性行为的临界值。不设 top，sticky 无效。
- 想让元素滚到顶部时粘住，就写
top: 0。 - 想留出导航栏空间，可以写
top: 60px。 - 注意：不要用
margin-top替代top，它们作用不同。
4. 检查是否有 flex 或 grid 布局的影响
在 Flex 或 Grid 容器中使用 sticky 时，需注意子项的排列方式。
- Flex 容器中的子元素默认不占满高度，可能导致无法滚动。
- 确保容器允许内容超出并产生滚动：
.flex-container {
display: flex;
flex-direction: column;
max-height: 400px;
overflow-y: auto;
}
然后在子元素上设置 sticky 才能正常工作。
基本上就这些。sticky 定位不是“绝对生效”，它依赖结构和上下文。只要确保：有滚动容器、无 transform 干扰、正确设置 top，90% 的问题都能解决。不复杂，但容易忽略细节。
