DIVが別のDIVにフェードする

Question

ユーザーがページを下にスクロールし、上のDIVがその下のDIVにフェードした場合など、白い背景にフェードするまでどのようにしますか？ 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にフェードしない、彼らはフェード：https://jsfiddle.net/fkgzzxku/

そして、ここではそれがより良いイラストのステージングサーバー上でホストされています：

は、ここに私の試みのjsfiddleです0に近い数になるので、私の数学が間違っているように感じる。 私はまた、ユーザーがあまりにも速く（ページを押し下げるなどで）スクロールすると、3つの画像のすべてが別のものに色あせているのを見ることができることも分かりました。

ありがとうございます！

Answer 1

scrollY%scrollRangeがあなたのscrollPercentをscrollRangeに等しいことはありませんので、私が思うあなたは0 にそれを四捨五入するscrollPercentを計算した後scrollPercent= Math.round(scrollPercent*10)/10;を使用することができます0ません。また、あまりにも速くスクロールしてしまう問題があり機能によって引き起こされているように見えるんそれをスライス機能に置き換えることは私のためにうまくいきます（なぜわかりません）。更新されたコードはこちら

$(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を四捨五入しないで動作します。希望して助けてください