Chameleonic Header

Header component whose theme adapts on scroll to the underneath section.

How to

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).

<section class="position-relative js-cha-section">
  <div class="cha-header-clip js-cha-header-clip">
    <header class="cha-header js-cha-header">
      <!-- header content -->
    </header>
  </div>

  <!-- section content -->
</section>

<section class="position-relative js-cha-section">
  <!-- section content -->
</section>

<section class="position-relative js-cha-section">
  <!-- section content -->
</section>

To apply a color theme to a section and, consequently, to the header when it's floating over this section, apply a data-theme to the section:

<section class="position-relative js-cha-section" data-theme="dark">
  <!-- your section content 👇-->
</section>

You can read more about creating color themes with CodyFrame on our Colors documentation page.

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 👇-->
</section>

⚠️ 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.

Categories

• Effects > Scroll
• Navigation > Header

Bug report & feedback

Component Github page ↗