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动画滚动导航栏

1 个答案: