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.
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="https://github.com/eduardomb/scroll-up-bar/raw/master/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 viewportfullyEnterViewport
- when the bar is completely in the viewportexitViewport
- when the bar completely leaves the viewportpartiallyExitViewport
- when the bar goes from being fully in the viewport to only partiallyCheckout 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 pluginThe plugin was tested on:
Read the Contributing document for instructions on how to set up your development environment to build and test scroll-up-bar.