Add classes to elements on scroll when they are in view

scroll-animation.js

var suffix = '-x';
var windowHeight;
var products = $('.animate' + suffix);
products.addClass('animate' + suffix);
var checkPosition = function () {
  products.each(function() {
    var elem = $(this);
    var top_of_element = elem.offset().top;
    var bottom_of_element = elem.offset().top + elem.outerHeight();
    var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
    var top_of_screen = $(window).scrollTop();
    if ((bottom_of_screen - 100 > top_of_element)){
      elem.addClass('animating' + suffix);
    } else {
      // elem.removeClass('fade-in-element');
    }
  } );
};
$(window).scroll(checkPosition);
checkPosition();