Как сделать - липкий элемент
Узнайте, как создать липкий элемент с помощью CSS.
Примечание. Этот пример не работает в Internet Explorer или Edge 15 и более ранних версиях.
Липкий элемент
Пример
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Элемент with position: sticky;
позиционируется на основе позиции прокрутки пользователя.
Липкий элемент переключается между relative
и fixed
, в зависимости от положения прокрутки. Он позиционируется относительно до тех пор, пока в окне просмотра не встретится заданная позиция смещения — тогда он «застревает» на месте (например, position:fixed).
Примечание. Internet Explorer, Edge 15 и более ранние версии не поддерживают фиксированное позиционирование. Для Safari требуется префикс -webkit- (см. пример ниже). Вы также должны указать по крайней мере один из top
, right
, bottom
или left
для работы фиксированного позиционирования.
Чтобы узнать больше о позиционировании CSS, прочитайте наш учебник по позиционированию CSS .