🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Chameleonic Header

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

Copy: View demo

Dependencies

All components are based on CodyFrame.

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 .position-relative.js-cha-section to each section that triggers a theme change.

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

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us