🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

scrollAway.js is an ultra-light jQuery plugin which make any element (e.g. a sticky top navigation bar) hide on scroll down and show up again on scroll up.

sticky-navigation

Documentation

scrollAway.js

A simple jQuery plugin that hides elements on scroll down, and reveals them on scroll up.

It's useful for things like fixed top navigation bars, particularly on small screens where you want to maximize screen space for reading when scrolling down.

Getting Started

Download the production version or the development version.

In your web page:

<script src="jquery.js"></script> <script src="dist/scrollaway.min.js"></script> <script> jQuery(function($) {   $('#top-bar').scrollAway(); }); </script>

Documentation

scrollAway.js comes with a sensible set of defaults so it will just work without configuration. You can customize it by passing an object to each scrollAway.js instance, specifying some or all of the following options:

Option Type Default Description
animation String 'fade' The jQuery animation to apply when showing/hiding the element. Accepts either fade or slide. Anything else will toggle the element with no animation.
duration Number 400 The time (in milliseconds) the animation should take to complete.
easing String 'swing' The easing function to use for the animation. Accepts swing or linear.
delay Number 350 How often to fire the scroll event.
topTriggerDistance Number 0 How far the user should have scrolled down from the top of the page (in pixels) before triggering the plugin.
bottomTriggerDistance Number 0 How far the user should have scrolled up from the bottom of the page (in pixels) before triggering the plugin.
autoShowAtBottom Boolean true Whether to show the element when the user reaches the bottom of the page.

Examples

Top bar: http://negomi.github.io/scrollaway/


You May Also Like