如何创建 - 粘滞图片

了解如何使用 CSS 创建粘滞图片。

粘滞图片

注释:此示例不适用于 Internet Explorer 或 Edge 15 及更早版本。

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

position:sticky;的元素是根据用户的滚动位置来定位的。

粘性元素在 relative 和 fixed 之间切换，具体取决于滚动位置。它是相对定位的，直到在视口中遇到给定的偏移位置 - 然后它"粘"在适当的位置（如 position:fixed）。

注意:Internet Explorer、Edge 15 及更早版本不支持粘性定位。 Safari 需要 -webkit- 前缀（参见下面的示例）。您还必须至少指定 top、right、bottom 或 left 之一用于粘性定位。

要了解有关 CSS 定位的更多信息，请阅读我们的 CSS 定位教程。

要详细了解如何设置图片样式，请阅读我们的CSS 图片教程。