如何创建：粘性图像

学习如何使用 CSS 创建粘性图像。

粘性图像

注意：此例不适用于 Internet Explorer 或 Edge 15 及更早版本。

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

设置了 position: sticky; 的元素会根据用户的滚动位置进行定位。

粘性元素会在相对定位和固定定位之间切换，具体取决于滚动位置。在视口中达到给定的偏移位置之前，它会被相对定位 - 然后它会“粘”在原地（如 position:fixed）。

注意：Internet Explorer、Edge 15 及更早版本不支持粘性定位。Safari 需要一个 -webkit- 前缀（见实例）。要使粘性定位生效，还必须至少指定 top、right、bottom 或 left 中的一个。