Easy Scroll Into View Plugin For jQuery - Scrollie

Scrollie is an easy and customizable jQuery scroll into view plugin which listens for scroll up and/or scroll down events and triggers callback functions as an element is scrolled into or out of view. Great for scroll-triggered animations and more.

How to use it:

1. Download and place the JavaScript file jquery.scrollie.js after jQuery library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.scrollie.js"></script>

2. Call the function on the container element you want to keep track of the scroll events.

$(function(){

  $('.element').scrollie();

});

3. Create your own functions as the element is scrolled into or out of view.

$('.element').scrollie({

  scrollingInView : function(elem, offset, direction, coords, scrollRatio, thisTop, winPos){

    // activates when the whole element is moving inside the window

  },

  scrollingToTheTop : function(elem, offset, direction, coords, scrollRatio, thisTop, winPos){

    // activates when it enters the window and stops when it reaches the top

  },

  scrollingOutOfView : function(elem, offset, direction, coords, scrollRatio, thisTop, winPos){

    // actives when the element reaches the top of the window and stops when it is out of the window

  },
  
  scrolledOutOfView : function(elem, offset, direction, coords, scrollRatio, thisTop, winPos){

    // activates wehn the element is completly out of the window

  }

});

4. Possible options to customize the plugin.

$('.element').scrollie({

  // the scrolling element to watch for scrolling action
  parentElement : window, 

  // 'up', 'down'
  direction : "both", 

  // in pixels
  scrollOffset : 0, 
  scrollRatio  : 2

});

---

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