使用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腳本

回答

相關問題