Smart Auto Show/Hide Header Navigation – Reveal-Bar

Reveal-Bar is a PURE vanilla JavaScript plugin for creating a smart header navigation that auto shows/hides when you scroll down or up the webpage.

How to use it:

Create a header navigation for your website.

<div id="site-header">
  <div class="nav-1"></div>
  <div class="nav-2"></div>
</div>

Fix the header navigation to the top of the webpage.

#site-header {
  position: absolute;
  width: 100%;
  right: 0;
  left: 0;
  top: 0;
  will-change: top;
}

Include the revealbar.js script at the bottom of the webpage.

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

Active the reveal-bar.

revealbar("#site-header");

Available options & callbacks with default values.

revealbar("#site-header",{
  // callbacks
  onAttach: noop,
  onDetach: noop,
  onShow: noop,
  onHide: noop,
  // bottom offset
  bottomOffset: 0
  
});