一、什么是sticky定位？

简单来说，sticky定位就像是给元素装了个"磁铁"。当页面滚动时，这个元素会先正常跟随滚动，但当它碰到浏览器窗口边缘（比如顶部）时，就会像被磁铁吸住一样固定在那里。它结合了relative和fixed两种定位的特点，非常适合做导航栏、表格标题等需要固定展示的内容。

技术栈：纯CSS实现

/* 基础示例：让导航栏在滚动到顶部时固定 */
.navbar {
  position: sticky; /* 关键属性 */
  top: 0;           /* 触发固定的位置 */
  background: white;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

二、为什么需要sticky定位？

以前要实现类似效果，通常要用JavaScript监听滚动事件，不断计算元素位置，代码复杂还容易卡顿。sticky定位只需要几行CSS就能搞定，浏览器还会自动优化性能。比如电商网站的商品分类标签，滚动时固定在顶部，方便随时切换：

/* 商品分类标签固定示例 */
.category-tabs {
  position: sticky;
  top: 60px;  /* 在导航栏下方固定 */
  z-index: 10; /* 确保显示在最上层 */
  background: #f8f8f8;
  padding: 15px 0;
}

三、实际应用中的技巧

1. 多层级固定

当页面有多个需要固定的元素时（比如导航栏+二级菜单），通过设置不同的top值实现层级固定：

.header {
  position: sticky;
  top: 0;
  height: 80px;
}
.submenu {
  position: sticky;
  top: 80px; /* 在header下方固定 */
}

2. 表格标题固定

处理长表格时，让标题行在滚动时始终可见：

<style>
  table {
    border-collapse: collapse;
  }
  th {
    position: sticky;
    top: 0;
    background: #555;
    color: white;
  }
</style>

<table>
  <thead>
    <tr><th>姓名</th><th>年龄</th></tr> <!-- 这个标题会固定 -->
  </thead>
  <tbody>
    <!-- 很多行数据... -->
  </tbody>
</table>

3. 底部固定技巧

除了固定在顶部，也可以固定在底部。比如聊天窗口的发送框：

.message-input {
  position: sticky;
  bottom: 0;
  background: white;
  padding: 10px;
  border-top: 1px solid #eee;
}

四、你可能遇到的坑

1. 父容器不能有overflow

如果sticky元素的父元素设置了overflow: hidden或overflow: auto，sticky会失效。这是因为sticky需要在滚动容器内才能生效。

2. 需要指定定位边

只写position: sticky不生效，必须配合top、bottom等属性之一使用。比如top: 0表示距离顶部0px时触发固定。

3. 在Safari中的小问题

旧版Safari需要添加position: -webkit-sticky前缀才能正常工作：

.safari-fix {
  position: -webkit-sticky; /* 针对Safari */
  position: sticky;
}

五、与其他定位方式的对比

  • fixed：永远相对于视口固定，会脱离文档流
  • absolute：相对于最近的非static父元素定位
  • relative：相对于自身原本位置偏移
  • sticky：混合特性，在阈值范围内相对定位，超出后固定
/* 四种定位对比示例 */
.box {
  width: 100px;
  height: 100px;
}
.fixed-box {
  position: fixed;
  top: 0;
}
.sticky-box {
  position: sticky;
  top: 100px;
}

六、最佳实践场景

  1. 长页面导航栏
  2. 表格/列表标题行
  3. 侧边栏目录
  4. 页面底部操作栏
  5. 渐进式展示的广告位
/* 侧边栏目录固定示例 */
.sidebar {
  position: sticky;
  top: 20px;
  align-self: flex-start; /* 防止被flex布局拉伸 */
}

七、写在最后

sticky定位虽然好用，但要注意浏览器兼容性（IE完全不支持）。在实际项目中，可以先检测浏览器是否支持，不支持的可以回退到JavaScript实现。现代前端框架如React/Vue中，也可以封装成可复用的sticky组件。

记住这个简单的公式：
position: sticky + top/bottom值 + 不设置overflow = 完美固定效果