你有没有遇到过这样的场景？浏览网页时，侧边栏菜单随着页面滚动，滚到一半突然“黏”在屏幕上不动了，直到内容结束才继续移动。这种效果现在很多网站都在用，比如文档导航、购物车悬浮按钮。其实实现它并不复杂，关键就是 CSS 里的 position: sticky;。
什么是 sticky 定位？
sticky 是 CSS 中的一种定位方式，它像是 relative 和 fixed 的结合体。元素在正常文档流中表现为相对定位（relative），但当页面滚动到某个临界点时，它就变成固定定位（fixed），停留在指定位置，直到父容器移出视口。
举个生活中的例子：就像你在地铁上看广告牌，一开始它在车厢里跟着你移动，等你走到站台特定位置，某块广告突然“贴”在你眼前不动了，直到你走远它才重新进入流动状态——sticky 就是这个“贴住”的瞬间。
怎么用？简单几行代码搞定
使用 sticky 定位非常直接，只需要设置 position: sticky; 并配合一个偏移量，比如 top：
<div class="sidebar">
<div class="nav-item">首页</div>
<div class="nav-item">关于</div>
<div class="nav-item">联系</div>
</div>.sidebar {
position: -webkit-sticky; /* 兼容 Safari */
position: sticky;
top: 10px;
background: white;
}这里 top: 10px 表示当元素距离视口顶部 10px 时，它就会“粘住”。你可以根据需要改成 bottom、left 或 right，控制不同方向的吸附行为。
需要注意的几个坑
别以为写上 sticky 就万事大吉。它有几个容易翻车的地方。
第一，父元素不能有 overflow: hidden、overflow: auto 或 transform 这类属性，否则 sticky 会失效。因为这些属性会创建新的层叠上下文，把 sticky “锁住”了。
第二，sticky 必须指定 top 或 bottom 等阈值，光写 position: sticky 不加偏移是没用的。
第三，浏览器兼容性虽然现在不错，但老版本 Safari 需要加 -webkit-sticky 前缀，稳妥起见建议都写上。
实际应用场景
常见的用途比如长文章的目录导航。用户往下翻，标题一个个消失，但当前章节的导航项始终贴在顶部，方便随时跳转。
还有电商页面的商品详情页，加入购物车的按钮一开始在底部，滚动时自动吸顶，避免用户来回拉到底部操作。
甚至表格的表头也可以用 sticky，让列名一直可见，数据再多也不怕看花眼。
小技巧：多个 sticky 元素的叠加
如果你在一个容器里放了多个 sticky 元素，它们会“排队”吸附。比如两个都设置了 top: 0 的标题，上面那个占位，下面那个会等上面的移出视口后再贴上来，视觉上很顺滑。
这种自然的层叠行为不需要 JavaScript 控制，全靠 CSS 自动处理，省事又高效。