jquery更改背景颜色用户滚动

Question

使用jquery是否可以当用户向下滚动页面时背景的动画从50%白色变为90%白色或某些？

首先它是颜色rgba(255,255,255,.5),当用户在颜色下方滚动210px时become rgba(255,255,255,.9).

Answer 1

更新,更通用的版本:

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

在行动中

如果你想在滚动时进行平滑,渐变的变化,你应该尝试

$(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

Answer 2

在这里你去(当你滚动超过210px时,这会将页面颜色更改为蓝色,如果你返回,它将恢复为红色):

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