Свойство position: sticky в CSS позволяет фиксировать элемент в заданном месте при прокрутке страницы. 5 Пока элемент не достиг определённого расстояния от края окна браузера, он ведёт себя как относительно позиционированный. 2 Когда элемент достигает этой точки, он становится фиксированным и остаётся на месте до тех пор, пока пользователь не доскроллит страницу обратно. 3

Некоторые особенности работы свойства:

• Работает только в пределах родительского контейнера. 4 Если родительский контейнер выходит за границы области просмотра, липкий элемент теряет свои фиксированные свойства. 4
• При вертикальной прокрутке для элемента имеют смысл указывать только top и bottom. 5 При горизонтальной — только свойства left и right. 5
• Если нужный элемент занимает всю высоту родительского блока, то position: sticky не сработает. 2

Свойство position: sticky следует применять, когда нужно зафиксировать элемент в определённом месте, например:

• Прикрепить элемент к верхнему краю страницы. 1 В большинстве случаев так используют это свойство. 1
• Прилепить элемент к нижней границе. 1 Например, можно задать «липкое» позиционирование футеру, чтобы при скролле он всегда был у нижнего края. 1
• Сделать закреплённую шапку. 2 Если шапка является непосредственным наследником body, то при загрузке экрана шапка будет статичной, а при скролле страницы — зафиксированной сверху. 2

Липкое позиционирование поддерживается большинством современных браузеров, но может не работать в старых версиях. 4