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);
});

但是 DIVs 并没有完全淡化为 0，它们淡化为接近 0 的数字所以我觉得我的数学是错误的。我还发现，如果用户滚动速度太快（通过向下翻页等），您会看到所有 3 个图像都淡入另一个图像。

谢谢！

Answer 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 的情况下有效。希望对你有帮助

DIV 淡入另一个 DIV

DIV fades onto another DIV

html

javascript

jquery

scroll

opacity