position : sticky
Уникальное позиционирование, которое создаёт липкий элемент.
Время чтения: меньше 5 мин
- Кратко
- Пример
- Как понять
- Как пишется
- Подсказки
- На практике
- Лена Райан советует
Обновлено 8 мая 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Элемент с position : sticky «прилипает» к экрану при прокрутке, пока не встретится с границей родительского блока.
Пример
Скопировать ссылку «Пример» Скопировано
Сделаем «липкий» заголовок, а также «липкий» блок в правом нижнем углу для каждого из <section> :
Как понять
Скопировать ссылку «Как понять» Скопировано
Блоки с «липким» позиционированием ведут себя как position : relative и position : fixed одновременно. Пока блок не достиг указанного расстояния от края окна браузера, он ведёт себя как относительно спозиционированный. Когда блок достигнет этой точки, то станет вести себя, как будто мы указали position : fixed . А когда он встретится с противоположным краем родителя, то снова будет вести себя, как position : relative .
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Для блока, который должен быть «липко» позиционирован, указываем position : sticky и позицию относительно окна браузера. В этом примере блок «прилипнет» на расстоянии 15 пикселей от верхнего края окна.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Если нужный элемент занимает всю высоту родительского блока (если он один в блоке или просто самый высокий среди соседних элементов), то position : sticky не сработает.
�� При вертикальном скролле работают только свойства top и bottom , при горизонтальном — left и right . Или их логические аналоги inset .
�� position : sticky можно указать внутри родителя с overflow : scroll или overflow : auto .
�� Если элементу указать большее число пикселей, чем позволяет родитель, то элемент сразу встанет к противоположному краю родительского блока, но за пределы блока не выйдет.
На практике
Скопировать ссылку «На практике» Скопировано
Лена Райан советует
Скопировать ссылку «Лена Райан советует» Скопировано
�� С помощью такого позиционирования удобно делать закреплённую шапку — если она является непосредственным наследником body , то, указав шапке position : sticky , мы получим статичную шапку при загрузке экрана, а при скролле страницы — зафиксированную сверху.
Прилипающий блок CSS
Элемент с position: sticky; фиксируется в рамках ближайшего родителя, когда расстояние до границы ближайшего прокручиваемого родителя достигает указанного в свойствах top , right , bottom , left значения. На то, в каком месте элемент прикрепится и где отцепиться, также влияют свойства padding , margin и transform . Размещение элемента над другими элементами правится с помощью свойства z-index .
После того, как свойство position примет значение sticky , размер элемента не изменится, а соседние элементы не сдвинутся на освободившееся пространство.
How to make div fixed after you scroll to that div?
How to make a div remain fixed after you scroll to that div ? I have a div that is later in a page and you need to scroll to get to that div .
The div will appear before it should appear normally. Maybe a good example of what I need is second ad on 9gag. If your screen resolution is low enough, you won’t see that ad after you load the front page, but after you scroll down, you’ll see the second ad and it will remain fixed while you scroll down.
Как работает свойство «position: sticky;» в CSS?
Часто при верстке сайтов возникает необходимость зафиксировать определенный элемент, например, навигационную панель, так, чтобы она оставалась видимой при прокрутке страницы. В CSS для этого используется свойство position: sticky; .
Вот базовый пример HTML-кода, в котором используется это свойство:
В этом примере заголовок <header> будет «прилипать» к верхней части окна просмотра, когда пользователь прокручивает страницу вниз.
Однако, чтобы свойство position: sticky; работало корректно, необходимо учесть несколько важных моментов:
position: sticky; будет работать только тогда, когда на родительском элементе не установлено свойство overflow со значением hidden , scroll или auto .
Свойство position: sticky; не будет работать, если родительский элемент имеет меньшую высоту, чем «прилипающий» элемент. В таком случае, «прилипающий» элемент просто останется на своем месте.
Для корректной работы position: sticky; необходимо указать положение «прилипающего» элемента относительно окна просмотра с помощью свойств top , right , bottom или left . Например, top: 0; означает, что элемент будет «прилипать» к верхней части окна просмотра.
Итак, свойство position: sticky; в CSS позволяет создавать «прилипающие» элементы, которые остаются на своем месте при прокрутке страницы до тех пор, пока они полностью не исчезнут из виду. Это удобно для создания навигационных панелей, боковых меню и других элементов, которые должны быть всегда видны пользователю.