粘性定位

粘性定位（Sticky Positioning）是 CSS 中的一种定位方式，通过 position: sticky 实现。它结合了相对定位（position: relative）和固定定位（position: fixed）的特性，使元素在滚动到特定阈值时“粘”在视口的某个位置。

---

核心特性

1. 动态切换定位方式

   • 默认表现类似 position: relative，元素在文档流中占据位置。
   • 当用户滚动页面，元素到达预设的阈值（如 top: 10px）时，切换为 position: fixed，固定在视口指定位置。
   • 滚动回阈值范围内时，恢复为相对定位。

2. 依赖阈值属性

   • 必须设置 top、bottom、left 或 right 中的一个（如 top: 0），用于确定触发粘滞的临界点。

---

使用示例

.sticky-element {
  position: sticky;
  top: 20px; /* 当元素距离视口顶部 ≤20px 时触发固定 */
  z-index: 100; /* 确保元素在其他内容上方 */
}

---

典型应用场景

1. 固定导航栏
   页面滚动时保持导航栏始终可见。
2. 侧边栏定位
   长页面中侧边栏内容随滚动固定。
3. 表头固定
   表格横向滚动时保持表头可见。

---

注意事项

1. 父容器限制
   粘性元素仅在父容器内生效。如果父容器有 overflow: hidden 或高度限制，可能导致失效。
2. 浏览器兼容性
   支持现代浏览器（Chrome、Firefox、Safari 等），但对旧版浏览器（如 IE11）需降级处理。
3. 性能优化
   过度使用可能导致滚动卡顿，尤其在移动端。

---

对比其他定位

定位方式	脱离文档流	滚动行为	基准点
static	否	正常滚动	无
relative	否	正常滚动	自身原始位置
absolute	是	随父容器滚动	最近非 static 父元素
fixed	是	固定在视口	视口
sticky	否	动态切换固定/相对	视口阈值

---

常见问题

Q：粘性定位不生效？

• 检查是否设置了 top/bottom 等阈值。
• 确保父容器未设置 overflow: hidden。
• 父容器高度需大于粘性元素的高度。

Q：如何实现多段粘滞效果？
通过嵌套多个粘性元素并设置不同的阈值，可实现分阶段固定（如不同章节标题逐级固定）。