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

Category: Javascript , Menu & Navigation | June 24, 2015
Author:vascomarques
Views Total:3,323 views
Official Page:Go to website
Last Update:June 24, 2015
License:MIT

Preview:

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

Description:

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%);
}

You Might Be Interested In:


Leave a Reply