Question

我正在使用2个依赖于$（window）.scroll函数的脚本。一个是用于视差图像的imagescroll.js，一个是用于css3动画的inview.js，而该元素在视口中。这两个脚本如下

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');
    }
  }
}

视差脚本来自以下链接

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

现在的问题是，由于这两个脚本都在使用$（窗口）.scroll，因此视差已经停止工作，并且出现了一个空格而不是图像。您可以在以下链接中看到正在使用的HTML

http://bit.ly/1gUmHwj

请知道如何克服这一点。

提前致谢！

Answer 1

在两个脚本事件中使用jQuery名称空间，如下所示：

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

使用2 $（Window）.scroll脚本

1 个答案: