DIV淡入另一个DIV

Question

如果用户向下滚动页面，顶部DIV淡入其下的DIV中，等等等等，直到淡入白色背景为止，您将如何制作它？

这是我尝试的的jsfiddle：https://jsfiddle.net/fkgzzxku/

下面是它的一个临时服务器上托管了更好的说明：http://bound.staging.wpengine.com/

var target = $('div.slider-item'); 
var targetHeight = target.height(); 
var containerHeight = $('#intro-slider').outerHeight(); 

var maxScroll = containerHeight - targetHeight; 
var scrollRange = (maxScroll/(target.length - 1)) + 250; // originally 450 

$(document).scroll(function(e) { 
    var scrollY = $(window).scrollTop(); 
    var scrollPercent = (scrollRange - scrollY % scrollRange)/scrollRange; 
    var divIndex = Math.floor(scrollY/scrollRange); 

    target.has(':lt(' + divIndex + ')').css('opacity', 0); 
    target.eq(divIndex).css('opacity', scrollPercent); 
    target.has(':gt(' + divIndex + ')').css('opacity', 1); 
}); 

不过的DIV没有完全褪色为0，它们消失到接近0的数字，所以我觉得我的数学是错误的。 我还发现，如果用户滚动速度太快（通过按下页面等），你可以看到所有3个图像淡入另一个。

谢谢！

Answer 1

我想是因为scrollY%scrollRange是永远等于scrollRange您scrollPercent从来都不是0，可以计算scrollPercent舍其关闭，以0 而且造成滚动过快问题后使用scrollPercent= Math.round(scrollPercent*10)/10;似乎是造成具有功能用切片函数代替它对我来说工作正常（我不明白为什么）。这里是更新的代码

$(document).scroll(function(e) { 
var scrollY = $(window).scrollTop(); 
var scrollPercent =(scrollRange - scrollY % scrollRange)/scrollRange; 
var divIndex = Math.floor(scrollY/scrollRange); 
target.slice(0,divIndex).css('opacity', 0); 
target.eq(divIndex).css('opacity', scrollPercent); 
target.slice(divIndex+1).css('opacity', 1); 
}); 

这工作没有舍去scrollPercent。希望它有帮助