粘性定位的新特性

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

基本语法与工作原理

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

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

关键点在于：

• 必须指定至少一个阈值（top/right/bottom/left）
• 元素会相对于最近的滚动祖先（overflow 不为 visible 的容器）进行粘性定位
• 如果祖先容器不可滚动，则相对于视口定位

实际应用场景

导航栏固定

最常见的应用是页面滚动时固定顶部导航栏：

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

<style>
.sticky-header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 100;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
</style>

表格标题固定

长表格滚动时保持表头可见：

<table>
  <thead>
    <tr class="sticky-header">
      <th>姓名</th>
      <th>年龄</th>
      <!-- 其他表头 -->
    </tr>
  </thead>
  <tbody>
    <!-- 表格内容 -->
  </tbody>
</table>

<style>
.sticky-header {
  position: sticky;
  top: 0;
  background: #f8f8f8;
}
</style>

高级用法与技巧

多级粘性定位

可以在同一页面实现多层粘性元素：

.section-title {
  position: sticky;
  top: 60px; /* 在导航栏下方固定 */
  background: white;
  z-index: 50;
}

动态阈值

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

:root {
  --header-height: 80px;
}

.sticky-element {
  position: sticky;
  top: var(--header-height);
}

粘性底部

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

.footer {
  position: sticky;
  bottom: 0;
  background: #333;
  color: white;
}

常见问题与解决方案

父容器溢出隐藏

如果父容器设置了 overflow: hidden，粘性定位会失效：

/* 错误示例 */
.parent {
  overflow: hidden; /* 会导致子元素粘性定位失效 */
}

.sticky-child {
  position: sticky;
  top: 0;
}

解决方案是改用其他溢出处理方式：

.parent {
  overflow: auto; /* 或 overflow: visible */
}

性能优化

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

1. 限制页面中粘性元素的数量
2. 避免在大型列表中使用
3. 使用 will-change 属性提示浏览器：

.sticky-element {
  position: sticky;
  top: 0;
  will-change: transform;
}

浏览器兼容性

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

• IE11 及更早版本不支持
• 某些旧版移动浏览器需要前缀
• Safari 需要 -webkit- 前缀

完整的兼容性方案：

.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

与 JavaScript 的交互

虽然粘性定位是纯 CSS 方案，但有时需要与 JavaScript 配合：

// 检测元素是否处于粘性状态
function isSticky(element) {
  const rect = element.getBoundingClientRect();
  return rect.top === parseInt(getComputedStyle(element).top);
}

// 添加/移除粘性状态类
window.addEventListener('scroll', () => {
  const header = document.querySelector('header');
  header.classList.toggle('sticky-active', window.scrollY > 0);
});

创意用法

渐进式固定

实现元素分阶段固定效果：

.stage-1 {
  position: sticky;
  top: 20px;
}

.stage-2 {
  position: sticky;
  top: 80px;
}

视差效果

结合粘性定位创建视差滚动：

.parallax-container {
  height: 200vh;
}

.parallax-element {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
}

响应式设计考虑

在不同屏幕尺寸下调整粘性定位：

/* 移动设备禁用粘性定位 */
@media (max-width: 768px) {
  .sticky-element {
    position: relative;
    top: auto;
  }
}

可访问性注意事项

1. 确保固定元素不会遮挡主要内容
2. 为键盘用户提供跳过固定区域的选项
3. 考虑减少运动用户的体验：

@media (prefers-reduced-motion) {
  .sticky-element {
    position: relative;
  }
}