The scroll up bar plugin (jQuery) hides the top bar when scrolling down, and show it when scrolling up. It's specially useful on mobile interfaces to save some precious space.

• Simple
• Bar with offset
• Viewport callbacks

Include jQuery and scroll-up-bar.min.js scripts:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="scroll-up-bar.min.js"></script>

Bower users can get the source with:

bower install scroll-up-bar

Create a top bar using position absolute.

<div id="topbar" style="position: absolute; top: 0; left: 0; width: 100%; background: #ccc;">
  Top bar
</div>

Tip: you can also add top different than zero

And then invoke scrollupbar() on the element.

$('#topbar').scrollupbar();

Alternatively you can invoke with $.scrollupbar($('#topbar'))

You can pass callback functions in initialization to handle bar visibility events.

• enterViewport - when the bar enters the viewport
• fullyEnterViewport - when the bar is completely in the viewport
• exitViewport - when the bar completely leaves the viewport
• partiallyExitViewport - when the bar goes from being fully in the viewport to only partially

Checkout the callback example.

There are two global boolean properties that are updated according to bar visibility.

• $.scrollupbar.isInViewport - true if any part of the bar is visible, false if not
• $.scrollupbar.isFullyInViewport - true if the entire bar is visible

• $.scrollupbar.destroy - restores bar to original position and disables plugin

The plugin was tested on:

• Chrome
• Firefox
• Safari
• Opera
• IE

Read the Contributing document for instructions on how to set up your development environment to build and test scroll-up-bar.