Using 2 $(Window).scroll scripts

Question

I'm using 2 scripts which are dependent on $(window).scroll function. One is imagescroll.js for parallax images and one is inview.js for css3 animations while the element is in viewport. Both the scripts are as follows

Inview.js

$(function() {
      var $blocks = $('.animBlock.notViewed');
      var $window = $(document);

  $window.on('scroll', function(e){
    $blocks.each(function(i,elem){
      if($(this).hasClass('viewed')) 
        return;

      isScrolledIntoView($(this));
    });
  });
});

function isScrolledIntoView(elem) {
  var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();
  var elemOffset = 0;

  if(elem.data('offset') != undefined) {
    elemOffset = elem.data('offset');
  }
  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();

  if(elemOffset != 0) { // custom offset is updated based on scrolling direction
    if(docViewTop - elemTop >= 0) {
      // scrolling up from bottom
      elemTop = $(elem).offset().top + elemOffset;
    } else {
      // scrolling down from top
      elemBottom = elemTop + $(elem).height() - elemOffset
    }
  }

  if((elemBottom <= docViewBottom) && (elemTop >= docViewTop)) {
    // once an element is visible exchange the classes
    $(elem).removeClass('notViewed').addClass('viewed');

    var animElemsLeft = $('.animBlock.notViewed').length;
    if(animElemsLeft == 0){
      // with no animated elements left debind the scroll event
      $(window).off('scroll');
    }
  }
}

The parallax script is from the following link

http://www.jqueryscript.net/demo/Simple-Spotify-Like-jQuery-Image-Parallax-Effect-Plugin-Parallax-ImageScroll/demo/

Now the issue is that as both of these scripts are using the $(window).scroll, The parallax has stopped working and a white space has appeared instead of the image. You can see the working HTML at following link

http://bit.ly/1gUmHwj

Please lemme know how can I overcome this.

Thanks in advance!

Answer 1

Use jQuery namespaces in both script events like this :

$window.on('scroll.imagescroll', function(e){
 // CODE
$(window).off('scroll.imagescroll');
 // CODE