Как сделать липкий хедер с подменой фона

Показан CSS-приём для sticky header, который визуально меняет фон при скролле без JavaScript: в hero и в основном контенте стоят sticky blocker-элементы, совпадающие по цвету с фоном секций и перекрывающие контент под фиксированным хедером. Это полезно, когда нужен аккуратный переход между секциями и хочется избежать лишней логики на скролле.

https://www.joshwcomeau.com/css/header-blockers/