Easy Scroll Into View Plugin For jQuery - Scrollie

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.

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.

  • Publication date: 16.02.2018
  • Source