滚动不透明度转移到和从目标元素

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);

});