进阶使用 position:sticky 打造丝滑交互

2024-01-15 22:47:43

position:sticky 的基本原理

position:sticky 可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。例如：

#element {
  position: sticky;
  top: 10px;
}

设置了以上样式的元素，在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素保持相对定位，跟随页面滚动。当 viewport 视口滚动到元素 top 距离等于或大于 10px 时，元素转换为固定定位，在页面中保持固定位置。

position:sticky 的巧妙应用

1. 悬浮导航栏

position:sticky 最常见的应用之一是创建悬浮导航栏。悬浮导航栏在页面滚动时保持可见，方便用户快速访问网站的不同部分。

#navigation {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

2. 动态侧边栏

position:sticky 还可以用于创建动态侧边栏。动态侧边栏在页面滚动时保持可见，并可以随着页面内容的变化而动态调整其内容。

#sidebar {
  position: sticky;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  z-index: 999;
}

3. 粘性页脚

position:sticky 还可以用于创建粘性页脚。粘性页脚在页面滚动时始终保持在页面底部，方便用户快速访问网站的底部内容。

#footer {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

4. 返回顶部按钮

position:sticky 还可以用于创建返回顶部按钮。返回顶部按钮在页面滚动时始终可见，方便用户快速返回到页面顶部。

#back-to-top {
  position: sticky;
  bottom: 20px;
  right: 20px;
  z-index: 999;
}

5. 滚动显示/隐藏元素

position:sticky 还可以用于创建滚动显示/隐藏元素。例如，您可以使用 position:sticky 来隐藏元素，直到用户滚动到特定位置，然后显示元素。

#element {
  position: sticky;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

window.addEventListener('scroll', () => {
  const element = document.getElementById('element');
  const scrollTop = window.pageYOffset;

  if (scrollTop > 100) {
    element.style.opacity = 1;
  } else {
    element.style.opacity = 0;
  }
});