Липкое позиционирование
sticky — это новое значение свойства position, добавленное как часть спецификации модуля макета CSS3. Оно действует аналогично позиционированию relative , поскольку ничего не удаляет из потока документов. Другими словами, липкий элемент не влияет на положение соседних элементов и не разрушает его родительский элемент.
В следующем примере, мы устанавливаем для #sidebar позицию sticky вместе с top: 10px. Значение top является обязательным и указывает расстояние от верхнего края области просмотра, где элемент будет прикреплен.
<div><br class="Apple-interchange-newline">
#sidebar {
position: -webkit-sticky; // обязательно для Safari
position: sticky; top: 0; // также обязательно. }</div>
{
position: -webkit-sticky; // обязательно для Safari
position: sticky;
top: 0; // также обязательно.
}
Теперь, когда мы прокручиваем страницу, когда расстояние боковой панели от вершины области просмотра достигает 0, боковая панель должна приклеиваться, давая нам позиционирование fixed . Другими словами, sticky — это своего рода гибрид между relative и fixed.
Поддержка
В последние пару лет поддержка браузерами CSS position: sticky существенно улучшилась. На диаграмме вы видите, что оно имеет отличный охват, хотя многие поддерживающие браузеры (такие как Chrome и Edge, оба из которых используют движок рендеринга Blink) все еще испытывают трудности, когда к CSS sticky применен к элементам thead или tr.