Работая с этим сайтом, вы даете своё согласие на использование файлов cookies. Это необходимо для нормального функционирования сайта, анализа трафика. Подробнее можно почитать в нашей Политике конфиденциальности

CSS Position Sticky — как это действительно работает

CSS Position Sticky — как это действительно работает

CSS Position Sticky — как это действительно работает

Сегодня рассмотрим одно очень полезное свойство позиционирования в CSS — sticky. Оно было объявлено ещё в далёком 2016 году, но хорошая поддержка браузерами появилась относительно недавно.

И причина тому, что position:sticky; редко используется разработчиками, скорее всего, в том, что с момента релиза и момента поддержки этого свойства всеми основными браузерами очень большое, он нём попросту забыли. Да и логика хоть и проста и с первого раза, наверняка, всё будет работать до первого косяка.

До мая 2016 года было всего 4 варианта позиционирования элемента на странице: статическая, относительная, абсолютная и фиксированная (static, relative, absolute, fixed). Это все знают. Позиционирование static и relative сохраняют свою позицию о общем потоке документа, а absolute и fixed этого не делают. Их позиция удаляется и они имеют «плавающее» поведение. Но сейчас вдаваться в подробности каждого из свойств position я не буду.

Позиционирование sticky взяло на себя возможности каждого из 4 вариантов position и больше похож на fixed. Оно используется для фиксации элемента но не в заданной позиции, как это делает fixed, а в заданном месте контейнера при прокрутке страницы. Его очень удобно использовать в меню или навигации, а также в заголовке таблицы.

Использовать его очень легко:

.block {
  position: sticky;
  top: 0;
}

В данном примере я прописал «липкое» позиционирование и top:0; я указал точку, по достижении которой при прокрутки элемент превращается в фиксированный, но при этом он не теряет своих остальных свойств, как если бы я просто применил position:fixed;.

Почему position:sticky; может не работать

Очень важно понимать, что липкое позиционирование не будет работать, если высота или ширина родительского контейнера была больше размера элемента

<style>
  .sticky{
     position: sticky;
     top: 0;
  }
</style>

<div class="wrapper">
   <div class="sticky">
       какой-нибудь контент
   </div>
</div>

В данном варианте прилипание работать не будет, потому что для элемента wrapper не задана высота. Другими словами для липкого элемента нужно создать контейнер в котором он будет находится. Он не может не иметь пространства как в случае с absolute или fixed.

Соответственно для элемента wrapper нужно либо добавить конкретную высоту, либо растянуть его по высоте каким-нибудь контентом. Очень важно помнить и понимать, что назначая элементу липкое позиционирование, его родительский контейнер автоматически становится «липким» и липкий элемент не может выйти за пределы липкого контейнера.

Вот результат работы:

Заключение

Position:sticky; — очень крутой. Чтобы сделать прилипание меню к верху экрана достаточно двух строчек к элементу меню в .css, ни это ли кайф!

Есть вопросы? Прошу в комментарии!


Комментарии 0

Вверх
Войти на сайт
или

Восстановить пароль Регистрация