CSS 如何实现吸顶效果？

Question

CSS 如何实现吸顶效果？

仓乃文 · Accepted Answer

吸顶效果（Sticky Header）是导航栏滚动到顶部时固定显示的常见交互。CSS 的 position: sticky 可以零 JS 实现。

基础实现：
```css
.sticky-header {
  position: sticky;
  top: 0;              /* 滚动到距顶部 0px 时固定 */
  z-index: 100;       /* 确保在其他内容之上 */
  background: white;   /* 必须有背景色，否则内容会透过去 */
}
```

带毛玻璃的吸顶导航：
```css
.sticky-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
```

补充说明：
- sticky 需要父容器不能有 overflow: hidden，否则失效
- 必须设置 top 值，否则不会触发粘滞
- 吸顶元素不会脱离文档流，其他内容从下方通过
- z-index 确保吸顶元素在普通内容之上