CSS sticky定位：让元素滚动时始终可见的实用技巧

CSS sticky定位是什么

在网页设计中，经常会遇到需要某个元素在滚动时始终保持可见的情况。比如侧边栏的目录、导航菜单，或者购物车结算栏。过去实现这类效果得靠JavaScript监听滚动事件，代码复杂还容易卡顿。现在有了CSS的sticky定位，事情变得简单多了。

sticky定位是position属性的一个值，写法是position: sticky。它像是relative和fixed的结合体：元素在正常文档流中像relative一样占位，但当页面滚动到特定位置时，它会像fixed一样固定在视窗的某个地方。

怎么用sticky定位

使用起来非常简单，只需要给元素设置position: sticky，并指定一个偏移量，比如top值。这个top值决定了元素距离视窗顶部多远时开始“粘住”。

<div class="sidebar">
  <h3>目录</h3>
  <ul>
    <li>第一章</li>
    <li>第二章</li>
    <li>第三章</li>
  </ul>
</div>

.sidebar {
  position: -webkit-sticky; /* 兼容 Safari */
  position: sticky;
  top: 10px;
  background: white;
  padding: 15px;
  border: 1px solid #ddd;
}

上面这个例子中，侧边栏会随着页面滚动，直到它距离视窗顶部只有10px时，就会“吸”在顶部不动了，继续往下滚内容从它下面划过。

实际应用场景

电商网站的商品详情页经常用到这个特性。比如商品价格和“立即购买”按钮，在用户往下看详情图或评论时，依然能快速点击。不用再手动回到顶部，体验顺滑很多。

另一个常见场景是长文章的目录导航。技术文档、教程类页面内容动辄几千字，读者滚动过程中如果能随时看到章节标题或跳转链接，查找效率会高不少。sticky定位正好解决这个问题。

需要注意的地方

sticky不是万能的。它依赖父容器的高度，如果父元素太短，还没等滚动到设定位置，父级已经结束，那sticky就不会生效。所以要确保父容器足够长，让滚动有空间发生。

另外，sticky只对设置了滚动的祖先元素生效。通常就是页面本身，也就是在滚动。但如果是在一个