Listen For Scroll Events And Fire Functions With Direction - jQuery scrollfy

scrollfy is a small and mobile-friendly Is In View jQuery plugin which listens for page scroll (touch move) events and fires certain functions if elements are in or out of the viewport.

The main goal of this plugin is to create awesome scroll animations for your long web pages & single page applications.

How to use it:

1. To get started, include the minified version of the jQuery scrollfy plugin after jQuery library.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="jquery.scrollfy.min.js"></script>

2. Attach event listeners to the target element and do whatever you like when the elements is scrolled into or out of the viewport. Note that the Scrollfy function must be called at the last, after the event listeners as follows:

$(document).ready(function() {

  $('div.block')
  .addClass('down')

  .on('scrollfy:scroll:begin', function(e) {
    $(this).removeClass('up down').addClass(e.scrollfy.direction);
  })

  .on('scrollfy:inView', function(e) {
    if ( !$(this).hasClass('inview') ) {
      $(this).delay(100).addClass('inview');
    }
  })

  .on('scrollfy:offView', function(e) {
    if ( $(this).hasClass('inview') ) {
      $(this).removeClass('inview');
    }
  })

  .on('scrollfy:scroll:end', function(e) {
    $(this).removeClass('up down');
  })

  .scrollfy(); 

  $(window).on('scrollfy:scroll', function(e) {
    if ( e.scrollfy.direction == 'up' ) {
      $('body').removeClass('down').addClass('up');
    } else if ( e.scrollfy.direction == 'down' ) {
      $('body').removeClass('up').addClass('down');
    }
  });

});

3. All default plugin options.

scrollfy({
  defaultOffset: 50,

  offsetAttrTop:     'scrollfy-offset-top',
  offsetAttrBottom:  'scrollfy-offset-bottom',

  eventNames: {
    scrollBegin:   'scrollfy:scroll:begin',
    scroll:        'scrollfy:scroll',
    scrollEnd:     'scrollfy:scroll:end',

    inView:        'scrollfy:inView',
    offView:       'scrollfy:offView',
  },

  scrollTimeout:    250,
  directionTimeout: 50,
  listenTo:         'scroll touchmove resize',
  inviewIdentifier: 'scrollfy-inview'
});

Changelog:

2019-02-25

• fixed the inview calculation

---

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