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/

您可以对此进行大量改进，以便在不需要等等时运行此代码....

在向下滚动时更改元素的背景图像5次

1 个答案: