jquery cambiar color de fondo desplazamiento de usuario

¿Es posible con jquery que cuando un usuario se desplaza hacia abajo de la página, el fondo se anima de 50% de blanco a 90% de blanco o algo?

Entonces, primero es el color rgba(255,255,255,.5) y cuando un usuario se desplaza 210px por debajo del color se become rgba(255,255,255,.9) .

aquí tienes (esto cambiará el color de la página a azul cuando recorras más de 210px, y volverá a rojo si vuelves a subir):

 $(document).ready(function(){ var scroll_pos = 0; $(document).scroll(function() { scroll_pos = $(this).scrollTop(); if(scroll_pos > 210) { $("body").css('background-color', 'blue'); } else { $("body").css('background-color', 'red'); } }); }); 

Versión actualizada y más genérica:

 var tStart = 100 // Start transition 100px from top , tEnd = 500 // End at 500px , cStart = [250, 195, 56] // Gold , cEnd = [179, 217, 112] // Lime , cDiff = [cEnd[0] - cStart[0], cEnd[1] - cStart[1], cEnd[2] - cStart[2]]; $(document).ready(function(){ $(document).scroll(function() { var p = ($(this).scrollTop() - tStart) / (tEnd - tStart); // % of transition p = Math.min(1, Math.max(0, p)); // Clamp to [0, 1] var cBg = [Math.round(cStart[0] + cDiff[0] * p), Math.round(cStart[1] + cDiff[1] * p), Math.round(cStart[2] + cDiff[2] * p)]; $("body").css('background-color', 'rgb(' + cBg.join(',') +')'); }); }); 

En acción

Si quieres un cambio suave y gradual al desplazarte, deberías probar

 $(document).ready(function(){ $(document).scroll(function() { var alpha = Math.min(0.5 + 0.4 * $(this).scrollTop() / 210, 0.9); var channel = Math.round(alpha * 255); $("body").css('background-color', 'rgb(' + channel + ',' + channel + ',' + channel + ')'); }); }); 

JSFiddle

Para un efecto de transición suave, debe verificar la posición de desplazamiento, por lo tanto, puede cambiar el color bg. use la función animada de jquery.

 I found the perfect what I was looking for here 

http://jsfiddle.net/cgspicer/V4qh9/

con la ayuda de @ redmoon7777

css

 body{ height:5000px; } .fifty { background:rgba(25,20,25,.5) } .ninty { background:rgba(25,20,25,.9) } 

jQuery

  $(document).ready(function(){ var scroll_pos = 0; $(document).scroll(function() { scroll_pos = $(this).scrollTop(); if(scroll_pos > 210) { $("body").removeClass().addClass('ninty'); } else { $("body").removeClass('ninty').addClass('fifty'); } }); }); 

DEMO

Con animación