粘性定位的新特性

position: sticky 是 CSS 中一种相对较新的定位方式，它结合了相对定位和固定定位的特点。元素在滚动到特定阈值前表现为相对定位，之后则固定在视口中。这种特性非常适合导航栏、目录等需要动态固定的场景。

基本语法与工作原理

粘性定位的语法非常简单：

.sticky-element {
  position: sticky;
  top: 10px;
}

关键点在于：

• 必须指定至少一个阈值（top/right/bottom/left）
• 元素在父容器内滚动时才会触发粘性效果
• 当父容器离开视口时，粘性效果会自动解除

实际应用场景

导航栏固定

最常见的应用是页面滚动时保持导航栏可见：

<header class="sticky-header">
  <nav>...</nav>
</header>

<main>...</main>

.sticky-header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 100;
}

表格标题固定

在长表格中保持表头可见：

th {
  position: sticky;
  top: 0;
  background: #f8f9fa;
}

侧边栏目录

实现滚动时目录跟随：

.toc {
  position: sticky;
  top: 20px;
  align-self: start;
}

常见问题与解决方案

父容器溢出隐藏

当父元素设置了 overflow: hidden 时，粘性定位会失效：

/* 错误示例 */
.parent {
  overflow: hidden;
}

.sticky-child {
  position: sticky; /* 不会生效 */
}

解决方案是改用其他溢出处理方式或调整布局结构。

多级粘性元素

多个粘性元素叠加时可能出现意外行为：

.header {
  position: sticky;
  top: 0;
}

.sub-header {
  position: sticky;
  top: 60px; /* 需要考虑上级粘性元素的高度 */
}

性能考量

过度使用粘性定位可能导致滚动性能下降，特别是在移动设备上。建议：

• 限制粘性元素数量
• 避免在复杂动画中使用
• 使用 will-change: transform 优化

高级技巧

动态阈值

结合 CSS 变量实现动态阈值：

:root {
  --sticky-offset: 100px;
}

.sticky {
  position: sticky;
  top: var(--sticky-offset);
}

粘性底部

元素可以固定在容器底部：

.footer {
  position: sticky;
  bottom: 0;
}

多方向固定

同时固定两个方向：

.corner {
  position: sticky;
  top: 10px;
  right: 10px;
}

浏览器兼容性

现代浏览器基本都支持粘性定位，但需要注意：

• IE11 及以下不支持
• 早期 Safari 需要 -webkit- 前缀
• 某些移动浏览器可能有特殊表现

可以通过特性检测增强兼容性：

if (CSS.supports('position', 'sticky') || 
    CSS.supports('position', '-webkit-sticky')) {
  // 支持粘性定位
}

与其他定位方式的对比

实际案例：渐进增强的导航栏

<nav class="primary-nav">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
  </ul>
</nav>

.primary-nav {
  background: #333;
  color: white;
}

@supports (position: sticky) or (position: -webkit-sticky) {
  .primary-nav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
}

调试技巧

1. 检查元素是否设置了阈值
2. 确认父容器没有 overflow: hidden
3. 检查 z-index 堆叠上下文
4. 确保父容器有足够高度
5. 在移动设备上测试实际表现

.debug-sticky {
  outline: 2px solid red;
  background: rgba(255,0,0,0.1);
}

未来发展方向

CSS 工作组正在讨论扩展粘性定位的功能：

1. position: sticky 与 scroll-snap 的结合
2. 更精细的阈值控制
3. 基于容器查询的粘性行为
4. 多阶段粘性效果（不同滚动位置不同固定方式）