不透明度をスクロールしてターゲット要素に移動する

Question

オーバーレイ要素の不透明度を黒にフェードインしようとすると、ページの中央でターゲット要素に近づき、その要素がビューポートを終了した後に透明にフェードバックします。

（壊れた）例：https://jsfiddle.net/dtcgbxcn/3/

あなたは '青' セクションに近づくと、それは暗く取得する必要があります。青い部分がビューポートに入る前に、ページは黒で黒くなります。その後、青色のセクションがビューポートを終了すると、不透明度が徐々に消え始めます。ページの下部（または他のターゲット要素）に達するまでに、オーバーレイは完全に透明になるはずです。

応答性のため、これらのセクションのいずれかの高さは不定であることに注意してください。私はあなたの例で周りいじっている

$(window).on('scroll', function() { 
    var st   = $(this).scrollTop(), 
     offset  = $('.blue').offset().top - $('.blue').height(), 
     opacity  = st/offset; 
     _docHeight = $('.red').height() + $('.blue').height() + $('.yellow').height(); 

    $('.overlay').height(_docHeight); 

    if (opacity > 2) { 
     opacity = 3 - opacity; 
    } 

    $('.overlay').css('opacity', opacity); 
}); 

Answer 1

、うまくいけば、これはあなたが限り機能として探していたものです。青が表示される直前に100不透明でなければならず、青がスクリーンからはみ出すにつれて100％透明になるはずです。私は、クロージャでこの問題をすべて解決し、セレクタをキャッシュするので、毎回$（）を呼び出す必要はありませんが、それ以外の場合は、これがうまくいくはずです。

• あなたのフィドルは上記の例と少し異なりましたが、これがあなたが探しているものかどうか教えてください。

https://jsfiddle.net/gmydzzmf/1/

$(window).on('scroll', function() { 

    var st   = $(this).scrollTop(), 
     win_height = $(window).height(), 
     offset  = $('.two').offset().top - $('.two').height() - (win_height/2), 
     _docHeight = $('.one').height() + $('.two').height(); 

     if (st<offset){ 
      // fading in 
      opacity = st/offset; 
     } else { 
      // fading out 
      opacity = ((_docHeight - st)/(win_height*2)); 
     } 
     $('.overlay').height(_docHeight); //move this to resize event 
      $('.overlay').css('opacity', opacity); 

});