CSS 当 CSS 的 position: sticky 停止固定定位

在本文中，我们将介绍 CSS 中的 position: sticky 属性，以及它在何种情况下停止固定定位。

阅读更多：CSS 教程

什么是 position: sticky

position: sticky 是 CSS 中一种用于实现元素固定定位的属性。当元素滚动到特定位置时，它会固定在页面上的某个位置，直到滚动到另一个特定位置。

示例:

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

在上面的示例中，元素 sticky-element 将在滚动到页面顶部 20px 的位置时固定在页面上。

position: sticky 的使用案例

position: sticky 常用于制作导航栏、表头以及其他需要保持在屏幕顶部或底部的元素。它可以帮助我们实现更好的用户体验和页面布局。

实现固定导航栏

导航栏经常需要固定在页面顶部，以便用户随时可以访问导航链接。通过将导航栏的位置设置为 sticky，可以在用户滚动页面时使导航栏保持在顶部。

示例:

.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
}

实现固定表头

在大型的数据表格中，当用户滚动时，固定表头可以确保用户始终可以看到表格的标题行，方便用户查看数据。

示例:

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

position: sticky 停止固定定位的条件

position: sticky 在特定条件下会停止固定定位。下面是几种常见的情况：

滚动容器限制

当元素的父元素（滚动容器）的高度小于元素本身高度时，元素就不会再继续固定定位。

示例:

<div class="scroll-container">
  <div class="sticky-element"></div>
</div>

.scroll-container {
  height: 200px; /* 滚动容器的高度小于 sticky-element 的高度 */
  overflow: scroll;
}

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

在上述示例中，当 sticky-element 元素滚动到父元素的底部时，它将停止固定定位。

position: relative 或 position: absolute

当元素的父元素具有 position: relative 或 position: absolute 属性时，sticky 属性将无效。

示例:

.wrapper {
  position: relative;
  height: 500px;
  overflow: scroll;
}

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

在上述示例中，因为 wrapper 具有 position: relative，所以 sticky-element 将无法实现固定定位。

改变滚动方向

当滚动容器的滚动方向改变时，sticky 元素将停止固定定位。

示例:

<div class="scroll-container">
  <div class="sticky-element"></div>
</div>

.scroll-container {
  height: 200px;
  overflow: scroll;
}

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

在上述示例中，当滚动容器的滚动方向改为水平滚动时，sticky-element 将停止固定定位。

跨越多个滚动容器

当元素跨越多个滚动容器时，其固定定位也将受到影响。

示例:

<div class="scroll-container">
  <div class="sticky-element"></div>
</div>

<div class="scroll-container">
  <div class="sticky-element"></div>
</div>

.scroll-container {
  height: 200px;
  overflow: scroll;
}

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

在上述示例中，第一个滚动容器的 sticky-element 固定定位将在滚动到第二个滚动容器时停止。

总结

在本文中，我们介绍了 CSS 中的 position: sticky 属性以及它的使用案例。我们还学习了 position: sticky 停止固定定位的几种条件，包括滚动容器限制、父元素具有 position: relative 或 position: absolute 属性、滚动方向改变以及元素跨越多个滚动容器等。通过灵活运用 position: sticky，我们可以实现更好的用户体验和页面布局。