使用2 $（Window）.scroll脚本

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

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，视差已停止工作，出现空白而不是图像。您可以在下面的链接

http://bit.ly/1gUmHwj

请让我再知道我可以克服这一看到工作HTML。

在此先感谢！

来源

2014-02-17 Pratik Ghela

你能复制上的jsfiddle这个问题？我不特别喜欢点击一些随机缩短的网址... –

你的视差代码在哪里？这可能是因为'$（window）.off（'scroll'）;' – putvande

@JamesDonnelly：_我缩短了URL因为NDA条款我无法在这里显示URL。我不知道如何在jsfiddle上复制相同的内容。 –

使用jQuery命名空间在这两个脚本这样的活动：

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

来源

2014-02-17 12:42:59

好的。我会试试这个。所以，你的意思是说，而不是$（window.scroll），我必须使用$（window.on（'scroll.imagescroll'）？ –

否。$（窗口）是对窗口对象的引用，而$（窗口）.on（'scroll.imagescroll'）意味着你给这个特定的事件一个“名字”，并且可以通过调用它的同一个“名字”来关闭它。记住$（window）.off '滚动'）将关闭所有滚动事件（所有名称空间） –

使用2 $（Window）.scroll脚本

回答

相关问题