Minimal jQuery Scroll Position Detection Plugin - Scroll Class
File Size: | 7.62 KB |
---|---|
Views Total: | 2546 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Scroll Class is a super tiny jQuery plugin that detects the page scroll position and automatically adds specified CSS classes to elements when they come into view.
How to use it:
1. Include jQuery library and the jQuery scroll class plugin at the bottom of the webpage.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="dist/scrollclass.min.js"></script>
2. Add the CSS classes to an element using data-scroll-class
attribute. In this case, we use Animate.css to animate this element when it's scrolled into view.
<div data-scroll-class="animated infinite bounce"></div>
3. Active the plugin with one JS call.
$('div').scrollClass();
4. Default plugin options.
$('div').scrollClass({ viewport: window, offset: 0, attribute: 'data-scroll-class', debounce: false, throttle: true, delay: 250, runOnInit: true, removeOnScroll: false, cachePositions: true, addClass: null, removeClass: null });
This awesome jQuery plugin is developed by ryanknights. For more Advanced Usages, please check the demo page or visit the official website.