在向下滾動時更改元素的背景圖像5次

Question

我希望在頁面上具有向下滾動效果，當您到達一張幻燈片時，它會停在該幻燈片上，但當您繼續向下滾動背景圖像一個元素不斷變化。我正在尋找scrolldeck.js http://johnpolacek.github.io/scrolldeck.js/decks/responsive/

要做到這一點，但我不知道如何刪除/添加類取決於使用滾動的數量。任何線索？謝謝！

Answer 1

您可以使用窗口滾動來確定要顯示的圖像以及何時顯示。快速示例。

var currentUrl = null; 
var imageControl = function(event) { 
    var fromTop = $(window).scrollTop(), // The distance from the top of the page 
     url = null; 

    if(fromTop < 2000) { 
    url = 'http://placehold.it/1000/FF0'; 
    } else if (fromTop > 2000) { 
    url = 'http://placehold.it/1000/F00'; 
    } 

    if(url !== currentUrl) { 
     $('body').css('background', 'url(' + url + ')'); 
     currentUrl = url; 
    } 
}; 

$(window).scroll(imageControl); 

演示：http://jsfiddle.net/2Pfsy/

您可以改善這種很多，所以當它並不需要等它不運行這段代碼....