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。希望它有幫助