Auto-Reveal Sticky Header Navigation with Pure JavaScript and CSS

Preview:

Description:

A sticky header navigation that automatically hides or reveals based on the scroll behavior.

Features:

• Auto hides on scroll down.
• Auto reveals on scroll up.
• Auto reveals when reaching the very end of the page.

How to use it:

Create a header navigation using a <nav> list.

<header class="header" role="banner">
  <nav>
    <ul>
      <li class="active"><a href="#">Home</a> </li>
      <li><a href="#">Services</a> </li>
      <li><a href="#">About</a> </li>
      <li><a href="#">Contact</a> </li>
    </ul>
  </nav>
</header>

The required CSS for the header navigation. The javascript will check for this class.

.header {
  width: 100%;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 85px;
  border: none;
  background-color: rgba(255,255,255,1);
  box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.2);
}

The JavaScript to active the smart header navigation.

;(function(document, window, index) {
  'use strict';
  var elSelector = '.header',
    element = document.querySelector(elSelector);
  if (!element) return true;
  var elHeight = 0,
    elTop = 0,
    dHeight = 0,
    wHeight = 0,
    wScrollCurrent = 0,
    wScrollBefore = 0,
    wScrollDiff = 0;
  window.addEventListener('scroll', function() {
    elHeight = element.offsetHeight;
    dHeight = document.body.offsetHeight;
    wHeight = window.innerHeight;
    wScrollCurrent = window.pageYOffset;
    wScrollDiff = wScrollBefore - wScrollCurrent;
    elTop = parseInt(window.getComputedStyle(element).getPropertyValue('top')) + wScrollDiff;
    if (wScrollCurrent <= 0)
      element.style.top = '0px';
    else if (wScrollDiff > 0)
      element.style.top = (elTop > 0 ? 0 : elTop) + 'px';
    else if (wScrollDiff < 0) {
      if (wScrollCurrent + wHeight >= dHeight - elHeight)
        element.style.top = ((elTop = wScrollCurrent + wHeight - dHeight) < 0 ? elTop : 0) + 'px';
      else
        element.style.top = (Math.abs(elTop) > elHeight ? -elHeight : elTop) + 'px';
    }
    wScrollBefore = wScrollCurrent;
  });
}(document, window, 0));