Ändern der Hintergrundfarbe basierend auf Seitenposition

Question

Ich möchte Juste die Hintergrundfarbe basierend auf der Bildlaufleiste ändern. Rot zum Blau für Beispiel ...

Dieser Code funktioniert, aber wie kann ich das Grau zu einer Farbe ändern?

http://fiddle.jshell.net/schmudde/ffk6phq0/

$(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 + ')'); 
    }); 
}); 

Answer 1

zwischen Farben verblassen, können Sie Ihren Code leicht eher zwischen den Kanälen verblassen anpassen können alle drei auf den gleichen Wert als die Einstellung. Basierend auf dem blau zu rot Beispiel finden Sie in der aktualisierten Geige: http://fiddle.jshell.net/j6tc4e9f/

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

Answer 2

$(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'); 
      } 
     }); 
    });