изменения дива непрозрачность в различных областях OnScroll

Question

Я хочу, чтобы достичь чего-то, как на рисунке ниже:

Я просто не могу сделать эту работу с этим кодом. https://jsfiddle.net/3vy66a7o/

$(window).on('scroll', function() { 
    $('.object').each(function() { 
    var offset = $(this).offset().top; 
    var height = $(this).outerHeight(); 
    offset = offset + height/2; 

    if (offset < 100) { 
    $(this).fadeTo("fast", 0); 
    } else if ((offset > 200) && (offset < 300)) { 
    $(this).css("opacity": "1"); 
    } else if (offset > 300) { 
    $(this).fadeTo('fast', 1); 
    } 
else { 
    $(this).css("opacity": "0"); 
} 
}); 
}); 

Answer 1

Detect положение элемента на окне, и действовать соответствующим образом.

var offset = $(this).offset().top - $(window).scrollTop(); 

См https://jsfiddle.net/3vy66a7o/3/

ли это эффект, который вы искали?