Fire Functions When Elements Become Visible/Invisible - jQuery scrollcallback
File Size: | 10.6 KB |
---|---|
Views Total: | 665 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
scrollcallback is a jQuery 'Is In View' plugin which executes callback functions when a specific element is scrolled in or out of the view. You can add / remove CSS classes in the callbacks, or execute any arbitrary JavaScript function you prefer.
How to use it:
1. Put the jQuery scrollback plugin's script after jQuery JavaScript library and you're ready to go.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.scrollcallback.min.js"></script>
2. The JavaScript to execute a function as the element '.container' is scrolled into view.
$('.container').scrollcallback(function(e, direction){ alert('In view'); });
3. Event handlers available.
$('.container').scrollcallback({ inHandler:function(e,direction){ // inview }, outHandler:function(e,direction){ // out of view } });
4. Specify the container where you want to keep track of the scroll position.
$('.container').scrollcallback({ // context: '#container' context:window });
This awesome jQuery plugin is developed by pgooood. For more Advanced Usages, please check the demo page or visit the official website.