將不透明度移動到目標元素和從目標元素中移動

Question

我試圖讓覆蓋div的不透明度在您接近頁面中間的目標元素時消失爲黑色，然後在該元素退出視口後淡入到透明狀態。

（碎）例：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); 

});