Use the Chameleonic Header component to change, on scroll, the theme of your header to match the one of the underneath sections of the page. The transition from one style to another is made possible by a clipping effect.
Add a class of .js-cha-section to each section that triggers a theme change and make sure its CSS position is set to relative (e.g. if working with CodyFrame, use the position-relative class).
Optionally, you can add a data-header-class attribute to the .js-cha-section element to specify a list of custom classes to be added to the header when it's floating over the section.
<section class="position-relative js-cha-section" data-header-class="bg">
<!-- your section content 👇-->
⚠️ Note that this effect is based on the clip-path CSS property (the header is clipped when its parent section is not inside the viewport). For this reason, this effect won't work if the header has dropdown elements.