如何創建：粘性元素

學習如何使用 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 中的一個。