От автора: закрепление элементов, когда пользователь прокручивает страницу до определенной точки, является распространенной моделью в современном веб-дизайне. Вы видите, что она применяется для верхней панели навигации, боковой панели, ссылок общего доступа или, возможно, рекламных блоков; сохраняя элемент видимым в окне просмотра при прокрутке.
Исторически для этого нам нужен был JavaScript. Тем не менее, липкое поведение стало новым стандартом (CSS position: sticky), позволяющим добиться этого эффекта с помощью чистого CSS. Давайте посмотрим, как это работает!
Липкое позиционирование
sticky — это новое значение свойства position, добавленное как часть спецификации модуля макета CSS3. Оно действует аналогично позиционированию relative , поскольку ничего не удаляет из потока документов. Другими словами, липкий элемент не влияет на положение соседних элементов и не разрушает его родительский элемент.
В следующем примере, мы устанавливаем для #sidebar позицию sticky вместе с top: 10px. Значение top является обязательным и указывает расстояние от верхнего края области просмотра, где элемент будет прикреплен.
#sidebar { position: -webkit-sticky; // обязательно для Safari position: sticky; top: 0; // также обязательно.
}Теперь, когда мы прокручиваем страницу, когда расстояние боковой панели от вершины области просмотра достигает 0, боковая панель должна приклеиваться, давая нам позиционирование fixed . Другими словами, sticky — это своего рода гибрид между relative и fixed.
Вложенность
Кроме того, CSS position: sticky будет работать в поле прокрутки или в переполненном элементе. На этот раз мы установим для top 15px, чтобы задать больше места над боковой панелью, когда она находится в неверном положении.
Боковая панель останется липкой по всей высоте родительского элемента (то есть: когда нижняя часть родительского элемента достигнет нижней части боковой панели, она снова «вытолкнет» ее со страницы).
Просто, не так ли?
Поддержка
В последние пару лет поддержка браузерами CSS position: sticky существенно улучшилась. На диаграмме вы видите, что оно имеет отличный охват, хотя многие поддерживающие браузеры (такие как Chrome и Edge, оба из которых используют движок рендеринга Blink) все еще испытывают трудности, когда к CSS sticky применен к элементам thead или tr.
Кроме того, как упоминалось ранее, Safari предлагает полную поддержку, но требует использования префикса -webkit-.
Использование полифилла
Чтобы помочь не поддерживающим браузерам (их не так много сейчас), мы можем использовать stickyfill, разработанный Олегом Корсунским. Полифилл прекрасно работает в различных условиях. Независимо от того, заданы ли для элемента отступы, поля, границы в em, числом с плавающей запятой или в процентах, полифил будет точно имитировать поведение sticky. И использование stickyfill интуитивно понятно.
Для начала возьмите stickyfill.js (опционально с jQuery, если вы более знакомы с ним и предпочитаете использовать для выбора элементов). Подключите эти библиотеки в HTML-документе. Затем запустите stickyfill с указанным элементом следующим образом:
var sidebar = document.getElementById('sidebar');
Stickyfill.add(sidebar);Если вы используете jQuery, вы можете написать следующее:
$('#sidebar').Stickyfill();Теперь наша липкая боковая панель должна работать во всех браузерах, включая Chrome и Opera. Polyfill достаточно умен, чтобы работать только в неподдерживающих браузерах, в противном случае он будет полностью отключен, оставив нативную реализацию браузера.
Предостережения
Перед тем, как сделать решающий шаг и использовать sticky на своих веб-сайтах, следует отметить несколько вещей:
Во-первых, высота родительского контейнера должна быть больше, чем липкого элемента.
У полифилла есть свои недостатки: он не будет работать в переполненном блоке.
На момент написания этой статьи не было никакого специального обработчика событий JavaScript, чтобы определить, когда sticky элемент зафиксирован. Такое событие может быть полезно, например, для добавления дополнительных классов, когда элемент приклеен (это может быть не то слово). Однако есть немного хакерский способ добиться этого с помощью API Intersection Observer. Прочтите этот пост, чтобы узнать больше.
Заключение
CSS position: sticky — отличный инструмент, если вам просто нужен простой липкий элемент. Если ваши потребности выходят за рамки этого — скажем, вы хотите добавить некоторые необычные эффекты к закрепленному элементу — вам все равно будет лучше выбрать решение на JavaScript, будь то написанное вручную или библиотека, подобная Waypoints.js с ее модулем sticky.
Автор: Sathish Kumar Ramalingam
Источник: https://ramsatt.com
Редакция: Команда webformyself.