Ответ
Новое свойство position: sticky стало популярным в последние годы, хотя формально оно появилось в CSS ещё в 2017 (CSS3). Оно позволяет элементу вести себя как relative, пока он находится в области видимости, а при достижении определённого края (заданного через top, bottom, left, right) "прилипает" к нему, как fixed.
Пример:
.header {
position: sticky;
top: 0;
background: white;
}
Особенности:
- Работает только внутри родительского контейнера
- Требует указания хотя бы одного края (
top,bottomи т.д.) - Поддержка в браузерах почти полная, кроме старых версий IE/Edge