Cambiar opacidad div en desplazamiento

Question

¿Cómo puedo hacerlo para que cuando se desplace hacia abajo la página, el siguiente DIV se desvanezca sobre el anterior?

He creado este violín para ilustrarlo mejor: http://jsfiddle.net/meEf4/176/
Por ejemplo, si está en la mitad de la página, el fondo es azul.

Editar: Aquí está el contenido de ese jsFiddle, en caso de que alguna vez explote y alguien tenga un problema similar.

<style> 
html, body, #red, #green, #blue { height: 100%} 
#container { height: 300%} 
#red, #green, #blue { 
    position: fixed; 
    top: 0; 
    width: 100%; 
} 
#red { background:red; z-index: 5} 
#blue { background:blue; z-index: 4} 
#green { background:green; z-index: 3}​  
</style> 

<div id="container"> 
    <div id="red"></div> 
    <div id="blue"></div> 
    <div id="green"></div> 
</div>​ 

Answer 1

Se puede hacer algo como esto:

var target = $('div.background'); 
var targetHeight = target.height(); 
var containerHeight = $('#container').outerHeight(); 

var maxScroll = containerHeight - targetHeight; 
var scrollRange = maxScroll/(target.length-1); 

$(document).scroll(function(e){ 
    var scrollY = $(window).scrollTop(); 
    var scrollPercent = (scrollRange - scrollY%scrollRange)/scrollRange; 
    var divIndex = Math.floor(scrollY/scrollRange); 

    target.has(':lt(' + divIndex + ')').css('opacity', 0); 
    target.eq(divIndex).css('opacity', scrollPercent); 
    target.has(':gt(' + divIndex + ')').css('opacity', 1); 
});​ 

WORKING DEMO FIDDLE

Asignar el valor de desplazamiento para el div fondo es necesario apuntar con el maxScroll value dividido por the number of background divs - 1. Este número es el rango de desplazamiento que un fondo div debe cubrir. Luego, calcula el porcentaje de desplazamiento para ese div utilizando el módulo scroll valuethe scroll range, de esta forma obtiene un valor entre 1 y 0 para el div de destino.

A continuación, se establece su div objetivo al valor calculado, los divs a continuación tienen la opacidad 1, los divs por encima de ella tiene la opacidad 0 (porque iban a través de su rango de 1 a 0 antes)

Answer 2

Esta solución puede ser mejorarse para que sea más genérico, pero es un comienzo

$(document).ready(function() { 

     var colordivs = $('#container div'); 

     $(document).scroll(function(e) { 
      var scrollPercent = ($(window).scrollTop()/$('#container').outerHeight()) * 100; 

      if (scrollPercent > 0) { 
       if (scrollPercent < 33) { 
        var opacity = 1 - (scrollPercent/33); 
        $(colordivs[0]).css('opacity', opacity); 
       } 
       else if (scrollPercent > 66) { 
        var opacity = 1 - (scrollPercent/100); 
        $(colordivs[0]).css('opacity', 0); 
        $(colordivs[1]).css('opacity', 0); 
        $(colordivs[2]).css('opacity', opacity); 
       } 
       else if (scrollPercent > 33) { 
        var opacity = 1 - (scrollPercent/66); 
        $(colordivs[0]).css('opacity', 0); 
        $(colordivs[1]).css('opacity', opacity); 
       } 
      } 
     }); 

    });