做网页设计或前端开发时，经常会遇到这样的需求：导航栏、侧边菜单或者返回顶部按钮，希望它在页面滚动到某个位置时就固定住，一直跟着用户滚动页面。以前实现这种效果得靠 JavaScript 监听滚动事件，写一堆逻辑，稍不注意还卡顿。现在有了 CSS 的 position: sticky，一切都简单多了。
什么是 sticky 定位？
position: sticky 是一种特殊的定位方式，元素在正常文档流中，直到滚动到某个阈值（比如距离视口顶部 10px）时，就“粘”在那个位置，变成固定定位，直到父容器移出视口才解除。
它既不像 fixed 那样一开始就脱离文档流，也不像 absolute 需要复杂参照，而是一种“条件性固定”。
怎么用？一个例子就能懂
假设你要做一个文章页，左侧是目录，右边是内容。你想让目录在滚动时始终留在屏幕上，方便点击跳转。代码可以这么写：
<div class="container">
<div class="sidebar">目录列表</div>
<div class="content">长篇内容...</div>
</div>.container {
display: flex;
}
.sidebar {
width: 200px;
position: -webkit-sticky; /* 兼容 Safari */
position: sticky;
top: 10px;
align-self: flex-start;
}
.content {
flex: 1;
height: 2000px; /* 模拟长内容 */
background: #f5f5f5;
}这里的关键是给 .sidebar 设置 position: sticky 和 top: 10px。意思是：当这个元素距离视口顶部还有 10px 时，就开始“粘”住不动，哪怕页面继续往下滚。
实际场景中的小细节
你在公司做内部管理系统，领导总说“那个搜索框一滚就没了，找起来太麻烦”。加一行 position: sticky; top: 0;，搜索框就永远挂在顶部，再也不会被抱怨了。
但要注意：sticky 要生效，它的父元素必须有足够高度让它“动起来”。如果父容器太短，还没来得及触发 sticky，就已经滚过去了，那它就没机会粘住。
另外，sticky 不止能用 top，还能配合 bottom、left、right 实现底部吸附或侧边固定，比如聊天窗口的“新消息提示条”，滑到哪都提醒你有内容。
兼容性问题别忽视
现在主流浏览器都支持 sticky 了，但如果你还得照顾老版本 IE 或旧版手机浏览器，就得降级处理，比如用 JS 模拟。不过大多数现代办公系统、内部平台用 sticky 完全没问题。
顺带提一句，移动端也吃得开。很多电商详情页的“商品信息栏”上下滑动时自动吸顶，背后就是 sticky 在撑着，性能比 JS 好太多。
和 fixed 到底有什么区别？
position: fixed 是完全脱离文档流，相对于视口固定，不管在哪都会停在屏幕同一个位置。而 sticky 还在文档流里，只是在特定条件下表现得像 fixed。一旦过了那个“粘”的区域，它就继续随内容滚动。
举个生活化的例子：fixed 就像贴在窗户上的贴纸，不管你怎么走，它都在玻璃那个位置；sticky 则像磁铁滑块，只有滑到铁门特定位置才会吸住，别的地方还是跟着手移动。
常见坑点提醒
有时候写了 sticky 却没反应，大概率是因为忘了设 top 或 left 值。sticky 必须搭配一个偏移量才能知道“粘”在哪。光写 position: sticky 是没用的。
还有一个容易忽略的点：父元素不能有 overflow: hidden 或 transform 等属性，这些会阻止 sticky 生效。调试时如果发现不工作，先检查父级有没有这些限制。