Auto Show / Hide Sliding Header with Pure JavaScript – slidingHeader.js

A vanilla JavaScript plugin used to create a sticky header navigation that auto hides on scroll down and shows up again when you scroll up the webpage.

How to use it:

Download and import the slidingHeader.js script into your webpage.

<script src="js/slidingHeader.js"></script>

Create a header navigation wrapped in the header tag.

<header>
  Header navigation here
</header>

Initialize the plugin and add a CSS class to the header navigation as you scroll the webpage.

var slidingHeader = new SlidingHeader({
      element: 'header',
      class: 'scrolled'
});

Add custom animations to the header navigation.

.scrolled {
  transform: translateY(-100%);
}