0

我正在使用 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/

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

http://bit.ly/1gUmHwj

请让我知道我该如何克服这个问题。

提前致谢！

4

1 回答 1

0

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

$window.on('scroll.imagescroll', function(e){
 // CODE
$(window).off('scroll.imagescroll');
 // CODE
于 2014-02-17T12:42:59.483 回答