Get new jQuery plugins just once a week

×

scroll-up-bar

December 25, 2014

Scroll Up Bar | jQuery plugin to display the navbar when scrolling up

The scroll up bar is a jQuery plugin that 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.

Created by Eduardo

Download

Example

Scroll up bar jquery plugin

top navbar

ScrollUpBar Plugin

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.

Demos

Installation

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

Basic Usage

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'))

Options

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

Checkout the callback example.

Properties

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

Methods

Browser support

The plugin was tested on:

Contributing

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

scroll-up-bar

Related posts:

Waypoints
One Page Navigation
3D Fold Scroll

To install using Bower
bower install scroll-up-bar

Scroll up bar jquery plugin

http://jquer.in/wp-content/uploads/2014/12/Scroll-Up-Bar.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever