Прилипающее изображение

 alexei 07/11/2021 - 09:55

Здесь вы узнаете, как сделать прилипающее изображение при помощи CSS.


Прилипающее изображение

Внимание! Данный пример не работает в Internet Explorer и Edge 15 и более ранних версий.


Как сделать прилипающее изображение


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

Элемент со свойством position: sticky позицианируется на основе его положения во время прокрутки пользователем.

"Прилипающий" элемент (со свойством position: sticky) переключается между значениями relative и fixed, в зависимости от его положения во время прокрутки. Пока элемент не достигнет края окна просмотра у него будет относительная позиция. Как только это произойдет, элемент "прилипнет" на месте (как при значении position: fixed).

Внимание! Internet Explorer, Edge 15 и более ранние версии не поддерживают значение position: sticky. Для Safari нужно указывать префикс -webkit-, как в примере. Также, чтобы все заработало, нужно установить одно из свойств - top, right, bottom или left.