如何創建：粘性圖像

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