根据页面位置更改背景颜色

我想要根据滚动更改背景颜色。 红色到蓝色例如……

此代码有效，但如何将灰色更改为颜色？

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

要在颜色之间淡入淡出，您可以稍微调整代码以在通道之间淡化，而不是将所有三个设置为相同的值。 根据您的蓝色到红色示例，请参阅更新的小提琴： 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'); } }); });