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