Здесь вы узнаете, как сделать прилипающее изображение при помощи 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.
