Почему не работает position sticky
Перейти к содержимому

Почему не работает position sticky

  • автор:

position: sticky НЕ работает

Наверняка Вы уже знаете о таком значении свойства position в CSS, как sticky . Но как у начинающих, так и у продвинутых верстальщиков, оно вызывает массу вопросов. Одним из основных является то, как именно работает это и при каких условиях.

Для справки: position: sticky – это одно из новых значений свойства position , которое позволяет элементам прилипать к необходимой части экрана, во время прокрутки страницы. И не надо никакого JS. Данное значение свойства позволяет использовать удобные и простые навигационные и информационные элементы, не прибегая к использованию JS кода.

Как работает это значение, Вы наверняка знаете, но я все же напомню.

Есть родительский элемент (к примеру). В нем есть заголовок , а также с длинным текстом. И таких элементов на странице несколько (может быть и один, несколько чисто для примера).

Чтобы пользователь мог видеть заголовок при прокрутке странице, и не забывал о чем идет речь, при изучении длинного текста (возможно с видео/изображениями), логично представить, что расположив элемент вверху экрана, он как нельзя лучше даст понять о чем идет речь и позволит хоть немного улучшить UX страницы.


1 Lorem ipsum dolor sit amet.



Lorem ipsum dolor sit amet, consectetur adipisicing.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi deserunt facilis incidunt labore maxime quia totam? Commodi deleniti et minima nostrum nulla numquam quaerat quod?


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad aliquam aperiam assumenda consequatur dignissimos dolorem enim, excepturi fugiat inventore ipsam nemo nesciunt, nisi non provident quo saepe sapiente suscipit, vel voluptatum. Libero, pariatur sequi. Commodi debitis earum, expedita id libero magni neque nulla numquam pariatur quam quibusdam, repellat repellendus sunt ullam vero voluptas voluptatum?






2 Lorem ipsum dolor sit amet, consectetur adipisicing elit.



Lorem ipsum dolor sit.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque esse eum illo molestias nam nobis non officia perspiciatis velit, voluptas.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic nisi quod quos sint veniam! Aspernatur assumenda aut autem, consectetur deserunt dicta eius fugiat itaque laboriosam molestias odio quas quidem quisquam, quos rem similique unde voluptatum?


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita non perspiciatis voluptates? Incidunt, ratione, reprehenderit? At beatae ea esse ipsum iusto maxime officia repudiandae, temporibus? Consequuntur deserunt dicta, doloremque dolorum ea eveniet modi neque non, nulla officiis porro repellendus sit temporibus unde velit! Aliquam, perferendis?






3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, illo.



Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam eligendi iste qui, quidem reiciendis sit!


Lorem ipsum dolor sit amet, consectetur adipisicing elit. At corporis dicta ducimus expedita fugit, illum in ipsum laudantium, magnam minima molestias nam, natus nobis non nostrum pariatur praesentium provident quidem quo recusandae reiciendis repudiandae sequi tempore vero vitae? Expedita id ipsam minus sequi? Aperiam atque eaque error minus, tempora voluptas voluptates voluptatibus. Ab ad animi autem ipsam magnam nesciunt quia unde. Consequatur eos laborum pariatur unde veritatis! A debitis doloribus facilis natus nemo saepe veritatis.



body 
sectionposition:relative;padding:40px 10px;margin:5px 0;border:1px solid #999>
h2position:sticky;top:0;background:rgba(255,0,0,.5)>
article
header,footer
footer

Важно задать РОДИТЕЛЬСКОМУ элементу position: relative , дочернему элементу: position: sticky; top: 0 >> элемент прилипнет к верху страницы, если задать bottom: 0 , то, соответственно, к низу.

САМОЕ ГЛАВНОЕ!

Для html , body НЕ ДОЛЖНО использоваться свойство overflow: hidden или overflow-x: hidden . Иначе, position: sticky НЕ сработает вообще .

ТАКЖЕ position: sticky не работает, если использовать новое свойство CSS — backdrop-filter . То есть, родительский контейнер НЕ должен иметь это свойство. Или же тот контейнер, на котором возникает полоса прокрутки.

position : sticky

Уникальное позиционирование, которое создаёт липкий элемент.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 8 мая 2023

Кратко

Скопировать ссылку "Кратко" Скопировано

Элемент с position : sticky «прилипает» к экрану при прокрутке, пока не встретится с границей родительского блока.

Пример

Скопировать ссылку "Пример" Скопировано

Сделаем «липкий» заголовок, а также «липкий» блок в правом нижнем углу для каждого из :

 h1  position: sticky; top: 15px;> .squares__item:last-of-type  position: sticky; bottom: 15px;> h1  position: sticky; top: 15px; > .squares__item:last-of-type  position: sticky; bottom: 15px; >      

Как понять

Скопировать ссылку "Как понять" Скопировано

Блоки с «липким» позиционированием ведут себя как position : relative и position : fixed одновременно. Пока блок не достиг указанного расстояния от края окна браузера, он ведёт себя как относительно спозиционированный. Когда блок достигнет этой точки, то станет вести себя, как будто мы указали position : fixed . А когда он встретится с противоположным краем родителя, то снова будет вести себя, как position : relative .

Как пишется

Скопировать ссылку "Как пишется" Скопировано

 .block  position: sticky; top: 15px;> .block  position: sticky; top: 15px; >      

Для блока, который должен быть «липко» позиционирован, указываем position : sticky и позицию относительно окна браузера. В этом примере блок «прилипнет» на расстоянии 15 пикселей от верхнего края окна.

Подсказки

Скопировать ссылку "Подсказки" Скопировано

�� Если нужный элемент занимает всю высоту родительского блока (если он один в блоке или просто самый высокий среди соседних элементов), то position : sticky не сработает.

�� При вертикальном скролле работают только свойства top и bottom , при горизонтальном — left и right . Или их логические аналоги inset .

�� position : sticky можно указать внутри родителя с overflow : scroll или overflow : auto .

�� Если элементу указать большее число пикселей, чем позволяет родитель, то элемент сразу встанет к противоположному краю родительского блока, но за пределы блока не выйдет.

На практике

Скопировать ссылку "На практике" Скопировано

Лена Райан советует

Скопировать ссылку "Лена Райан советует" Скопировано

�� С помощью такого позиционирования удобно делать закреплённую шапку — если она является непосредственным наследником body , то, указав шапке position : sticky , мы получим статичную шапку при загрузке экрана, а при скролле страницы — зафиксированную сверху.

Почему не работает position: sticky ?

position: sticky

Воспользуемся в качестве примера вот таким вот кодом:

* < box-sizing: border-box; >section < width: 100%; padding: 15px; overflow: hidden; >.container < width: 100%; display: flex; >.red < width: 50%; background: red; height: 1000px; >.blue

Здесь у нас есть два блока:

  1. Красный, который имеет высоту 1000px
  2. Синий который имеет высоту 100px и заданное свойство position: sticky

Это значит, что синий блок должен прилипать к верху и двигаться вдоль красного блока. Но этого не происходит. И давайте разберемся почему.

Первое правило «липкого» позиционирования гласит: должен быть элемент которому будет задано свойство position: sticky и контейнер в пределах которого он будет двигаться. В нашем примере и контейнер и элемент у нас в наличии.

Второе что нам необходимо сделать, это куда наш элемент должен прилипать: к верху или к низу. В блоке с классом .blue мы указали top: 0. Но наш элемент так и не работает.

А вот тут самое интересное. Я как человек, который воспринимает все буквально, долго не мог понять в чем проблема.

Третье: Родитель прилипающего элемента не должен иметь заданное свойство overflow: hidden, auto, scroll. Но загвоздка в том, что даже если блок не является ближайшим родителем элемента, то он тоже не должен иметь заданное свойство overflow.

Смотрим пример, и видим, что у нас как раз есть такой родитель: блок section с overflow: hidden.

Поэтому в нашем случае рабочий код будет иметь следующий вид:

* < box-sizing: border-box; >section < width: 100%; padding: 15px; >.container < width: 100%; display: flex; >.red < width: 50%; background: red; height: 1000px; >.blue

Как на са­мом деле ра­бо­та­ет position: sticky в CSS

У position: sticky уже очень неплохая браузерная поддержка, но большинство разработчиков так и не используют это свойство.

У этого есть две основные причины: во-первых, браузерам потребовалось много времени на реализацию адекватной поддержки этого свойства. И все просто успели забыть о нём.

Во-вторых, многие разработчики до конца не понимают логику, по которой это свойство работает. И тут появляюсь я!

Я полагаю, что вы хорошо знакомы с позиционированием в CSS, но давайте кратко повторим основные моменты:

Ещё три года назад существовало четыре типа позиционирования: static , relative , absolute и fixed .

Основное различие между static и relative , absolute и fixed в том, какое место они занимают в потоке документа (DOM). Элементы с позицией static и relative сохраняют своё естественное положение в потоке документа, в то время как absolute и fixed «вырываются» из потока документа и становятся плавающими.

Новое значение sticky похоже на все предыдущие значения сразу. Я проиллюстрирую это чуть позже.

Моё первое знакомство с «липким» позиционированием Скопировать ссылку

Думаю, что большинство из вас игрались с «липким» позиционированием. Так было и у меня, пока в один момент я не осознал, что совсем не понимаю это свойство.

При первом знакомстве с position: sticky все быстро понимают, что элемент залипает, когда область просмотра достигает определённой позиции.

.some-component

Проблема в том, что иногда это работает, а иногда нет. Когда всё работает, то элемент и правда залипает. Но когда не работает, то при прокрутке элемент перестаёт залипать. Как человеку, который живёт одним только CSS, мне было важно разобраться в сути проблемы. Именно поэтому я решил тщательно изучить «липкое» позиционирование.

«Липкая» разведка Скопировать ссылку

Во время своих экспериментов я заметил, что если элемент с position: sticky является единственным ребёнком своего родителя-обёртки, то этот «липкий» элемент не залипает.

  .sticky 
Некий контент

Когда я добавлял больше элементов внутрь родителя-обёртки всё начинало работать как ожидалось.

Почему так происходит?

Причина кроется в том, что элемент с position: sticky может перемещаться только в пределах контейнера, в котором находится. А поскольку в моём случае он был единственным ребёнком, у него не было элементов-братьев, поверх которых он мог перемещаться.

Как на самом деле работает position: sticky в CSS Скопировать ссылку

«Липкое» позиционирование состоит из двух основных частей: «липкого» элемента и «липкого» контейнера.

«Липкий» элемент — это элемент, которому мы задали position: sticky . Элемент будет становиться плавающим, как только область видимости достигнет определённой позиции, например top: 0px .

.some-component

«Липкий» контейнер — это HTML-элемент, который оборачивает «липкий» элемент. Это максимальная область, в которой может перемещаться наш элемент.

Когда вы задаёте элементу position: sticky , его родитель автоматически становится «липким» контейнером! Очень важно это запомнить! Контейнер будет являться областью видимости для элемента. «Липкий» элемент не может выйти за пределы своего «липкого» контейнера.

В этом причина, почему в предыдущем примере «липкий» элемент не залипал: он был единственным дочерним элементом контейнера.

В заключение Скопировать ссылку

Вот и всё. Я надеюсь, что вам понравилась эта статья и мне удалось поделиться своим опытом. Я буду признателен, если вы поделитесь этим постом и поаплодируйте.

Другие мои посты о CSS Скопировать ссылку

  • New CSS Logical Properties!
  • Becoming a CSS Grid Ninja!
  • The New Responsive Design Evolution
  • The Best Way to RTL Websites with Sass!
  • CSS Architecture for Multiple Websites With Sass

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *