jquery改变背景颜色用户滚动答案

【问题标题】：jquery change background color user scrolljquery改变背景颜色用户滚动
【发布时间】：2012-02-04 01:37:12
【问题描述】：

当用户向下滚动页面时，jquery 是否有可能使背景从 50% 白色变为 90% 白色或其他？

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

【问题讨论】：

标签： jquery colors background scroll background-color

【解决方案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(',') +')');
    });
});

In action

如果你想要在滚动时平滑、渐变的变化，你应该尝试

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

【讨论】：

当我尝试这个时，我在页面的按钮上得到了一些奇怪的行？（深灰色和一些浅灰色）
我似乎无法在空白页上重现它，我将在指向小提琴演示的链接中进行编辑。
很棒的代码！我怎么能改变颜色？现在它从深灰色变为浅灰色。如果我想把它从黄色变成白色怎么办？
@TonyBolero 如果你还在寻找这个我已经用更通用的版本更新了答案 - 只需插入你的开始和结束颜色以及 y 位置，它应该很好
很好的答案。我扩展了它并添加了不透明度并修复了一个错误。见 jsFiddle：jsfiddle.net/cek0rrow/1

【解决方案2】：

到这里（当您滚动超过 210 像素时，这会将页面颜色更改为蓝色，如果您返回，则会恢复为红色）：

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

【讨论】：

谢谢你！完美:) 我怎样才能让它动画？只需将 css 更改为 .animate({"background":"#F00"},500)?
仅将 css 更改为 .animate() 将不适用于背景颜色。 jQuery 可能不支持为背景颜色设置动画。您将不得不借助 jquery UI 或一些插件。参考这个问题：stackoverflow.com/questions/190560/…
感谢 diEcho。我赞同@iTypist 所说的，你需要一个插件才能使彩色动画工作
该插件不适用于 RGBA（Maanstraat 要求）。你需要这个修改版pioupioum.fr/sandbox/jquery-color
@redmoon7777 这是否意味着每滚动一个像素，样式都会更新？或者当旧值和新值相同时，jQuery 可以检测到它不需要吗？我知道现代计算机上的现代浏览器可以很容易地处理这个问题，但我很好奇:)。

【解决方案3】：

为了平滑过渡效果，您应该检查滚动位置，相应地您可以更改背景颜色。使用jquery的.animate函数。

I found the perfect what I was looking for here

http://jsfiddle.net/cgspicer/V4qh9/

【讨论】：

【解决方案4】：

在@redmoon7777 的帮助下

css

body{ height:5000px; }
.fifty { background:rgba(25,20,25,.5) }
.ninty {  background:rgba(25,20,25,.9) }

jQuery

 $(document).ready(function(){       
        var scroll_pos = 0;
        $(document).scroll(function() { 
            scroll_pos = $(this).scrollTop();
            if(scroll_pos > 210) {
                $("body").removeClass().addClass('ninty');
            } else {
                $("body").removeClass('ninty').addClass('fifty');
            }
        });
    });

DEMO

【讨论】：

【解决方案5】：

带动画

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<!--for RGBA support. http://pioupioum.fr/sandbox/jquery-color/ -->
<script type="text/javascript" src="https://raw.github.com/piouPiouM/jquery-color/master/jquery.color.js"></script> 
<!--the magic -->
<script type="text/javascript">
$(document).ready(function(){
    $(document).scroll(function(){
        if($(this).scrollTop() > 210)
            $('#bk').animate({backgroundColor: 'rgba(255,255,255,.9)'}, 1000);
    });
});
</script>
</head>
<body style="background: black">
<div id="bk" style="background-color: rgba(255,255,255,.5); height: 200%; min-height: 400px">
<!--change this element's background transparency instead of body so that you will see the effect -->
</div>
</body>
</html>

【讨论】：

这可行，但是当你往下走但往上走时，颜色不会变回来......

【解决方案6】：

这是一个改编自 W3 教程 javascript 的答案。

 window.onscroll = function() {scrollFunction()};

function scrollFunction() {
if (document.body.scrollTop > 420 || document.documentElement.scrollTop > 420) {
document.getElementById("navigationBar").style.background = "#2E5894";

} else {
   document.getElementById("navigationBar").style.background = "transparent";

}
}

这改变了一个特定的 id，对我来说是我的导航栏。为了便于转换，请将其添加到您的 css 中，在这种情况下位于导航栏“id”下（以及您喜欢的其他规范）。

 #navigationBar{
/*my header bar, no need to follow this*/
overflow: hidden;
color: white;*/
width:100%;
position: fixed;
-webkit-transition: all ease-out .5s;
-moz-transition: all ease-out .5s;
-o-transition: all ease-out .5s;
 transition: all ease-out .5s;
 }

这将为您提供一个在 420 像素后逐渐改变颜色的条形。

【讨论】：