Auto-hiding Sticky Navbar Plugin - jQuery ScrollUpBar

File Size: 21.9 KB
Views Total: 792
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Auto-hiding Sticky Navbar Plugin - jQuery ScrollUpBar

ScrollUpBar is a jQuery sticky navigation plugin that automatically hides the header navbar when scrolling down, and shows it again when scrolling up. 

It's especially useful on mobile devices, where precious screen space is at a premium, as it gives users easy access to the menu when they need it but doesn't get in the way when they don't.

Looking to learn more about sticky header navigation? See this post.

How to use it:

1. Load the minified version 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 an absolutely positioned navbar on the page.

<div id="topbar">
  ...
</div>
#topbar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}

3. Call the function on the sticky navbar and the plugin will do the rest.

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

4. Callback functions.

$('#topbar').scrollupbar({
  enterViewport: function() {
    // do something
  },
  fullyEnterViewport: function() {
    // do something
  },
  exitViewport: function() {
    // do something
  },
  partiallyExitViewport: function() {
    // do something
  }
});

This awesome jQuery plugin is developed by eduardomb. For more Advanced Usages, please check the demo page or visit the official website.