Auto Hide / Reveal Element On Page Scroll - scrollAway.js

File Size: 110 KB
Views Total: 1313
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Auto Hide / Reveal Element On Page Scroll - scrollAway.js

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. Great for use in mobile or tablet devices to maximize the screen space.

How to use it:

1. Place the jQuery scrollAway.js plugin after loading jQuery library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="src/jquery.scrollaway.js"></script>

2. Create a navigation bar that sticks to the top of the webpage.

<header id="nav-bar"></header>
#nav-bar {
  position: fixed;
  ...
}

3. Call the function on the navigation bar and the plugin will take care of the rest.

$('#nav-bar').scrollAway();

4. Default options, which can be overridden by passing in an object to the constructor with these properties.

$('#nav-bar').scrollAway({

  // 'fade' or 'slide'
  animation: 'fade',

  // animation duration
  duration: 400,

  // easing effect
  easing: 'swing',

  // how often to fire the scroll event
  delay: 350,

  // How far the user should have scrolled down from the top of the page (in pixels) before triggering the plugin.
  topTriggerDistance: 0,

  // How far the user should have scrolled up from the bottom of the page (in pixels) before triggering the plugin.
  bottomTriggerDistance: 0,

  // show the element when the user reaches the bottom of the page.
  autoShowAtBottom: true

});

This awesome jQuery plugin is developed by negomi. For more Advanced Usages, please check the demo page or visit the official website.