javascript - DIV淡入另一个DIV

如果用户向下滚动页面，顶部的DIV淡入该页面下方的DIV，依此类推，以此类推，直到其淡化为白色背景，您将如何处理？

这是我尝试的一个技巧：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张图像都淡入了另一张图像。

谢谢！

最佳答案

我认为，因为scrollY%scrollRange永远不等于scrollRange，您的scrollPercent永远不会为0。您可以在计算scrollPercent并将其四舍五入后使用scrollPercent= Math.round(scrollPercent*10)/10;。
此外，滚动速度过快导致的问题似乎是由has函数将其替换为slice函数所导致的（我不明白为什么）。这是更新的代码

$(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即可工作。希望能帮助到你