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

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

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

2 个答案: