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
   
Fire Functions When Elements Become Visible/Invisible - jQuery scrollcallback

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.