前端世界里有很多看似“直白”的属性，比如 position: sticky，听起来像是“粘住某个位置”——只要设置好就能吸附在页面某个位置上，滚动时一动不动。
结果实际开发中你可能经历过以下崩溃三连：
- 设置了
position: sticky; top: 0;，元素依然随页面滚动； - 控制台一切正常，CSS 正确无误，就是不生效；
- 你开始怀疑人生，默默换回了
position: fixed。
别慌，这篇文章带你一次性弄懂 position: sticky 的底层机制、误区、实际用法和最佳实践。看完之后，不再当“被黏住的程序员”。
一、先明确：什么是 sticky？
position: sticky 是一种混合定位机制：
它在元素进入视口之前是相对定位（relative），一旦滚动到临界值，就切换为固定定位（fixed）的行为。
简单来说就是：先跟着父元素走，滚到该停的位置就贴住。
常见写法如下：
.sticky-header {
position: sticky;
top: 0;
background: white;
}
然后希望这个 header 在滚动时“吸顶”，视觉效果如同 position: fixed，但它依然在文档流中。
二、问题来了：为什么你写了 sticky，却没有“粘性”？
很多人以为是浏览器不支持，其实在现代浏览器（包括手机端）中早就原生支持了。
问题通常出在这些容易忽视的坑：
坑一：父元素有 overflow: hidden / auto / scroll
这是最常见的元凶。
.parent {
overflow: hidden;
}
.child {
position: sticky;
top: 0;
}
这种结构下，.child 将永远无法“粘住”。
原因是 sticky 的参考上下文是最近的可滚动祖先，而 overflow: hidden 等属性会导致容器成为新的“滚动上下文”，sticky 被限制在里面。
解决方法：不要给 sticky 的父级设置 overflow: hidden，或调整结构让 sticky 出现在没有滚动限制的区域。
坑二：sticky 的祖先 display: flex 且方向不匹配
你可能看到过这种结构：
<div class="container">
<div class="sidebar">...</div>
<div class="content">...</div>
</div>
.container {
display: flex;
}
.sidebar {
position: sticky;
top: 0;
}
你希望 sidebar 在垂直方向粘住顶部，但却发现它根本不“sticky”。
关键在于：flex 布局的主轴方向与 sticky 的方向冲突时，会导致 sticky 无法触发。
解决方法：
- 确保 sticky 的方向（如 top/bottom）是主轴方向；
- 或者避免让 sticky 元素在横向
flex容器中直接使用。
坑三：没有指定 top/left/right/bottom
这是最基本的问题，但常常被忽略。
.sticky {
position: sticky;
}
这段代码等于什么都没设置，因为你必须指定粘性的触发边界，否则就没有触发条件。
最常见的是：
.sticky {
position: sticky;
top: 0; /* 吸附到顶部 */
}
三、冷知识：sticky 也有“活动半径”
这个知识点比较少人知道：
position: sticky的“吸附”只在它所属的父元素区域内生效。
什么意思？我们来看一个例子：
<div class="section">
<h2 class="sticky">章节标题</h2>
<p>一大段内容</p>
</div>
.section {
height: 600px;
overflow: visible;
}
.sticky {
position: sticky;
top: 0;
}
当滚动到 .sticky 即将离开 .section 的底部区域时，它会自动“脱粘”而不再吸附。
这也就是说：
sticky 不是全页面范围内固定，而是在其包含块（父元素）范围内固定。
这点与 position: fixed 有本质不同。
四、实际场景推荐：sticky 的用武之地
1. 表头吸顶
表格中的 thead 永远固定在顶部，是 sticky 的经典场景：
thead {
position: sticky;
top: 0;
background: white;
z-index: 10;
}
冷知识提醒：不要忘了加
background和z-index，否则会被后面的表格内容遮挡。
2. 左侧目录导航
当你在写文档页面、博客系统、掘金专栏时，目录条跟随滚动吸附。
.nav {
position: sticky;
top: 20px;
}
提示：设置 top: 20px 可以保持一点视觉上的留白感，避免太贴边。
3. 分段标题悬浮
像微信公众号正文那种标题悬浮，每个段落标题随着滚动在顶部短暂停留，也是 sticky 的天然优势。
h2 {
position: sticky;
top: 0;
background: white;
}
这种方式比 IntersectionObserver 更简单、性能更好，兼容也更广。
五、bonus：sticky + scroll-margin 搭配更美观
另一个冷知识是，sticky 和 scroll-margin 是一对黄金搭档。
当你在跳转锚点时，元素可能会被“贴死”在顶部，体验很差。
.section-title {
scroll-margin-top: 60px;
}
这个属性的意思是：在浏览器滚动到锚点时，距离顶部保留 60px 的空隙，刚好与 sticky 的吸顶位置对齐。
六、你应该避免的错误总结
| 错误写法 | 可能问题 |
|---|---|
position: sticky 没加 top | 不触发粘附 |
父级有 overflow: hidden | 限制粘附区域 |
| sticky 在 flex 子项中使用 | 与方向冲突不触发 |
忘了加 z-index / background | 被遮挡、视觉错位 |
| 误用 sticky 处理全局固定 | 该用 fixed 的场景用 sticky 会失效 |
尾声：粘贴的不只是样式，更是理解力
CSS 很多“高级”特性并不是写法复杂，而是对浏览器工作方式的理解不够清晰。position: sticky 看似只是个定位属性，其实牵涉了滚动上下文、布局流、容器模型、层级控制等多个维度。
当你真正理解 sticky 的“粘性边界”与“父级限制”之后，你会发现它比 fixed 更灵活，也更优雅。
下一次当你写 sticky 的时候，不妨回想这篇文章里说的几条冷知识。让你的样式也拥有一点“持久的粘性”。
