position: sticky в CSS это новое свойство, которое используется для создания элементов, которые «прилипают» к верхней или нижней границе своего родительского элемента при прокрутке страницы.
Например, следующий CSS код делает элемент header «прилипающим» сверху при прокрутке страницы:
header {
position: sticky;
top: 0;
}
Здесь свойство position задает позиционирование элемента, а свойство top устанавливает расстояние от верхнего края родительского элемента, при котором элемент будет «прилипать».
Также, position: sticky может быть использовано для создания элементов, которые «прилипают» к нижней границе родительского элемента, задавая значение bottom вместо top.
position: sticky работает по-разному в зависимости от местоположения элемента и размеров его контейнера. Например, если контейнер элемента header меньше, чем высота самого элемента, элемент header не будет «прилипать».
Поддержка position: sticky имеется во всех современных браузерах, включая IE11. Значения top и bottom также могут быть заданы в процентах, пикселях или других единицах измерения в CSS.
