如何创建：粘性元素

学习如何使用 CSS 创建粘性元素。

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

粘性元素

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

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

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

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