jquery - 向下滚动时更改元素的背景图像 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/

您可以对此进行很多改进，以便它在不需要时不会运行此代码等......