介绍

您过去可能使用过position带有relative和absolute值的 CSS属性。现代 Web 浏览器现在支持该sticky值。它允许您在滚动到达某个点时使元素粘住。

一个元素position: sticky将表现得像一个相对定位的元素，直到它到达一个指定的点，然后开始表现得像一个静态定位的元素。

在本文中，您将创建一个示例，用于position: sticky了解其行为和功能。

先决条件

如果你想跟随这篇文章，你需要：

• 了解CSS 属性和值。
• 一个代码编辑器。
• 支持position: sticky.

使用 position: sticky

考虑一个div将成为弹性容器的容器。嵌套在里面的将是 4 个额外的div元素，它们将是 flex 项目。4个div元素将包含图像shark-1，shark-2，shark-3，和shark-4。

在您的代码编辑器中，使用以下标记：

<div class="container">
  <div class="item shark-1">
    <img src="/images/punk.png" width="100" alt="Sammy the Shark with a punk theme.">
  </div>
  <div class="item shark-2">
    <img src="/images/pony.png" width="100" alt="Sammy the Shark with a magical pony theme.">
  </div>
  <div class="item shark-3">
    <img src="/images/dino.png" width="100" alt="Sammy the Shark with a dinosaur theme.">
  </div>
  <div class="item shark-4">
    <img src="/images/steampunk.png" width="100" alt="Sammy the Shark with a steampunk theme.">
  </div>
</div>

并添加以下样式：

.container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  border: 2px dashed rgba(114, 186, 94, 0.35);
  height: 400px;
  background: rgba(114, 186, 94, 0.05);
}

.item {
  position: sticky;
}

.shark-1 {
  top: 0;
}

.shark-2 {
  top: 4rem;
}

.shark-3 {
  bottom: 1rem;
  align-self: flex-end;
}

在这个例子中，align-items: flex-start关于 flex 容器的规则很重要，因为否则 flex 项目默认为stretch元素将占据容器整个高度的值，从而取消粘性效果。

注意：如果您想复习不同的 flexbox 属性和值，请查看我们的flexbox 入门。

保存此文件并在现代 Web 浏览器中打开它：

上下滚动并观察sticky行为。请注意粘性定位元素如何仅在其父元素内具有粘性。

警告：有两种常见情况，position: sticky元素不会按预期粘在窗口上：

没有定义插入属性：确保粘性元素具有top或bottom设置。或者在水平滚动的情况下，left或right.

一个元素的祖先有不兼容的overflow：如果有父母或脱胶的祖先都没有overflow设置hidden，scroll或auto。这也适用于overflow-x和overflow-y。

第一条和第二条鲨鱼相对于视口建立的包含块的顶部是粘性的。第三条鲨鱼相对于视口建立的包含块的底部是粘性的。第四条鲨鱼不会滚动到粘性位置，因为它没有被分配position: sticky。

结论

在本文中，您创建了一个示例，用于position: sticky了解其行为和功能。

截至 2020 年，95% 的浏览器都对position: sticky. 有关详细信息，请参阅Can I Use CSS position:sticky。较旧版本的 Safari 将需要-webkit供应商前缀。在将其整合到您的 Web 应用程序中之前，请确保您的目标受众可以使用此功能。

如果您想了解有关 CSS 的更多信息，请查看我们的 CSS 主题页面以获取练习和编程项目。