hiding-header-webcomponent

Toggles header visibility on scroll. Try demo.html or Codepen demo.

Usage no npm install needed!

<script type="module">
  import hidingHeaderWebcomponent from 'https://cdn.skypack.dev/hiding-header-webcomponent';
</script>

README

Hiding Header Webcomponent npm Dependencies npm type definitions Published on webcomponents.org

Toggles header visibility on scroll. Try demo.html or Codepen demo.

UI example

How to use

<script
    type="module"
    src="https://unpkg.com/hiding-header-webcomponent@latest/dist/index.es.js?module"
></script>

<style>
    .content {
        background-color: #252525;
        color: #ffffff;
        padding: 1em;
    }
</style>

<hiding-header>Your header content</hiding-header>