Не фиксированный, а липкий хедер — CSS position sticky вместо fixed
Липкое позиционирование без JavaScript (благодаря CSS position: sticky)
Липкое позиционирование sticky — это новое значение свойства position, добавленное как часть спецификации модуля макета CSS3. Оно действует аналогично позиционированию relative , поскольку ничего не удаляет из потока документов. Другими словами, липкий элемент не влияет на положение соседних элементов и не разрушает его родительский элемент. В следующем примере, мы устанавливаем для #sidebar позицию sticky вместе с top: 10px. Значение top является обязательным и указывает расстояние от верхнего края области просмотра, где элемент будет прикреплен...
Sticky блок на JS
Несмотря на наличие position: sticky; в css я бы не назвал его простым в использовании: нужно выполнение большого количества условий для его реализации. Предлагаю решение на js. // выберите элемент за которым надо следить const isSticky = false; const element = document.getElementById('.element');
const windowHeight = window...