Änderung divs Opazität in verschiedenen Bereichen onscroll

Question

Ich möchte unten etwas erreichen wie in der Grafik:

Ich kann einfach nicht machen diese Arbeit mit diesem Code. 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 die Elementposition auf Fenster und entsprechend handeln.

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

Siehe https://jsfiddle.net/3vy66a7o/3/

War dies der Effekt, den Sie gesucht haben?