使用 jQuery 为滚动的导航栏设置动画

Question

我可以使用 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)

等等。

Answer 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>

使用 jQuery 为滚动的导航栏设置动画

Use jQuery to animate navigation bar on scroll

html

css

jquery

animation

jquery-animate