A repository of over 1000 quality jQuery plugins

jQuery Scrollaway

Scrollaway is a jQuery Hide & Reveal plugin.

Created by Negomi

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

Not what you're looking for? Click here to view more Hide & Reveal jQuery plugins

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:

OptionTypeDefaultDescription
animationString'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.
durationNumber400The time (in milliseconds) the animation should take to complete.
easingString'swing'The easing function to use for the animation. Accepts swing or linear.
delayNumber350How often to fire the scroll event.
topTriggerDistanceNumber0How far the user should have scrolled down from the top of the page (in pixels) before triggering the plugin.
bottomTriggerDistanceNumber0How far the user should have scrolled up from the bottom of the page (in pixels) before triggering the plugin.
autoShowAtBottomBooleantrueWhether to show the element when the user reaches the bottom of the page.

Examples

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



You might also like these other Hide & Reveal jQuery Plugins

  • Collapser

    Collapser is a small and useful jQuery plugin for collapsing/truncating an element text by words, characters and lines with a […]

  • JQuery Spoiler Project

    A simple project that uses Jquery to hide/reveal spoilers through buttons

  • CwHideReveal

    A jQuery hide reveal script