Smart Auto Show/Hide Header Navigation – Reveal-Bar

Category: Javascript , Menu & Navigation | March 28, 2017
Views Total:1,675 views
Official Page:Go to website
Last Update:March 28, 2017


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>

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.


Available options & callbacks with default values.

  // callbacks
  onAttach: noop,
  onDetach: noop,
  onShow: noop,
  onHide: noop,
  // bottom offset
  bottomOffset: 0

You Might Be Interested In:

Leave a Reply