Auto-hiding Sticky Navbar Plugin – jQuery ScrollUpBar

ScrollUpBar is a jQuery sticky navigation plugin that routinely hides the header navbar when scrolling down, and exhibits it once more when scrolling up. 

It is particularly helpful on cellular gadgets, the place treasured display screen area is at a premium, because it offers customers quick access to the menu once they want it however would not get in the best way once they do not.

Seeking to study extra about sticky header navigation? See this publish.

Learn how to use it:

1. Load the minified model of the jQuery ScrollUpBar plugin after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/scroll-up-bar.min.js"></script>

2. Create a fully positioned navbar on the web page.

<div id="topbar">
  ...
</div>

#topbar {
  place: absolute;
  high: 0;
  left: 0;
  z-index: 999;
}

3. Name the perform on the sticky navbar and the plugin will do the remaining.

$(perform(){
  $('#topbar').scrollupbar();
});

4. Callback features.

$('#topbar').scrollupbar({
  enterViewport: perform() {
    // do one thing
  },
  fullyEnterViewport: perform() {
    // do one thing
  },
  exitViewport: perform() {
    // do one thing
  },
  partiallyExitViewport: perform() {
    // do one thing
  }
});

This superior jQuery plugin is developed by eduardomb. For extra Superior Usages, please test the demo web page or go to the official web site.