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

Question

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

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

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

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