Как создать: sticky-изображение

Узнайте, как использовать CSS для создания sticky-изображений.

sticky-изображение

Внимание:Этот пример не подходит для Internet Explorer или Edge 15 и более ранних версий.

попробуйте сами

sticky-изображение

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

попробуйте сами

установлен position: sticky; элементы будут позиционироваться в зависимости от положения скролла пользователя.

Элементы с sticky-позиционированием будут переключаться между относительным и фиксированным позиционированием, в зависимости от положения скролла. До тех пор, пока элемент не достигнет заданного смещения в области просмотра, он будет относительным - затем он «прилипнет» на месте (например position:fixed)

Внимание:Internet Explorer, Edge 15 и более ранние версии не поддерживают sticky-позиционирование. Safari требует -webkit- Префикс (смотрите пример). Для того чтобы sticky-позиционирование работало, необходимо указать как минимум top、right、bottom или left в одном из них.

Связанные страницы

Урок:Изображение CSS

Урок:CSS позиционирование