DIV 淡入另一个 DIV答案

【问题标题】：DIV fades onto another DIVDIV 淡入另一个 DIV
【发布时间】：2023-04-04 22:09:01
【问题描述】：

如果用户向下滚动页面，顶部的 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 个图像都淡入另一个。

谢谢！

【问题讨论】：

标签： javascript jquery html scroll opacity

【解决方案1】：

我认为因为scrollY%scrollRange 永远不等于scrollRange，所以您的scrollPercent 永远不会为0。您可以在计算scrollPercent 后使用scrollPercent= Math.round(scrollPercent*10)/10; 将其四舍五入为0。此外，滚动太快引起的问题似乎是由 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 的情况下有效。希望对你有帮助

【讨论】：

非常感谢！你真棒;它也适用于我。