使用 jQuery 在滚动时为导航栏设置动画答案

【问题标题】：Use jQuery to animate navigation bar on scroll使用 jQuery 在滚动时为导航栏设置动画
【发布时间】：2015-01-02 11:04:55
【问题描述】：

我可以使用 jQuery 为我的导航栏设置动画，以便它在滚动时改变颜色吗？我想要的是一个导航栏，当滚动到顶部时具有 rgba(51, 51, 51, 0.3) 背景颜色，从顶部向下滚动 600px 时具有 rgba(255, 255, 255, 1)。

我知道可以用类似的东西来做这个：

$(window).bind('scroll', function() {
     if ($(window).scrollTop() > 600) {
         $('.navbar-container-fixed').addClass('white');
     }
     else if ($(window).scrollTop() < 600) {
        $('.navbar-container-fixed').removeClass('white');
     }
});

但这会在没有动画的情况下改变颜色。我想要的是渐进式的颜色变化，这样当你向下浏览页面时，背景颜色会慢慢变为白色。所以它是这样的：

0 px from top: rgba(51, 51, 51, 0.3)

100px from top: rgba(85, 85, 85, 0.4167)

200px from top: rgba(119, 119, 119, 5.334)

等等。

【问题讨论】：

为什么不将背景设置为渐变？或者，或者，使用.animate()
为什么要将背景设置为渐变？我以为我可以使用 .animate()，但是如何使它成为平滑的渐进式颜色变化，而不仅仅是暂时的变化。
search 'jquery animate' - 这里有一个设置动画时间的选项。
我知道。但是时间不应该取决于时间，而是取决于页面向下滚动的距离。这个问题可以理解吗？
有点像。 I saw this if it helps?

标签： jquery html css animation jquery-animate

【解决方案1】：

如何检查最大可用滚动高度，并根据滚动位置设置颜色？

$(window).bind('scroll', function() {
    var col_var = Math.round((255/$("body")[0].scrollHeight)*$(window).scrollTop());
    $(".navbar-container-fixed").css({
        "background-color":"rgb("+col_var+","+col_var+","+col_var+")"
    });

});

.navbar-container-fixed{
    display:block;
    width:50px;
    height:2000px;
    background:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar-container-fixed"></div>

【讨论】：

完美！我对其进行了修改以满足我的需要，它就像一个梦一样工作:)
太棒了，很高兴我能帮上忙 :)