Currently, when the second (red) div slides into the viewport, it fades in.

Unfortunately, this only happens with the first one because of the use of window.scrollY.

How can I calculate the opacity right for all divs? 

I've used this script:

<script>

$(window).scroll(function() {

$('.subPage').each(function(){

if($(this).css('opacity') <1 ) {

var targetHeight = $(this).outerHeight();

var scrollPercent = (targetHeight - window.scrollY) / targetHeight;

var opac = (1-scrollPercent);

if(opac >= 0){

$(this).css('opacity', opac);

}

}

});

});

</script>