Question

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

谢谢！

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的情况下工作。希望它有所帮助

DIV褪色到另一个DIV

1 个答案: