Alter CSS Classes While Scrolling - jQuery scrollClass

scrollClass is a simple, lightweight jQuery plugin that determines the scroll direction (scroll down & scroll up) and adds/removes CSS class(es) from a DOM element. The most common use case for this plugin is to create a smart header navigation that auto hides on scroll down and reveals itself again on scroll up.

Installation:

# NPM
$ npm install jquery-scrollclass --save

# Bower
$ bower install jquery-sticky-alert

How to use it:

1. Include the JavaScript file scrollClass.js after you've loaded the latest version of jQuery JavaScript library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/scrollClass.js"></script>

2. Enable the scrollClass on the target element which will be affected by the plugin on scroll down or up.

$('.navbar').scrollClass({
  // options here
});

3. Apply your own CSS styles the element as you scroll down or up the webpage.

.scrolled {
  /*
    CSS styles appended to the element
  */
}

.progressing {
  /*
    CSS styles when scrolling down
  */
}

.regressing {
  /*
    CSS styles when scrolling up
  */
}

4. Specify the distance (in pixels or a function) from the top of the document to add/remove the CSS classes when scrolling down or up.

$('.navbar').scrollClass({
  'offset':function(){
    return $('#element').offset().top - $('.navbar').outerHeight();
  }
});

---

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