Question

我有一个导航栏，当用户向下滚动时，我希望在其中更改rgba背景色；当用户滚动回到屏幕顶部时，我也希望它返回其原始的rgba颜色。我正在尝试使用.animate，因为我想轻松地进行背景更改，但是.animate函数似乎根本没有任何作用，并且控制台上没有错误？

我似乎无法找到一个清晰明确的答案，因此任何帮助/建议都将非常有用。

$(document).ready(function(){
    var scroll_pos = 0;
        $(document).scroll(function() { 
            scroll_pos = $(this).scrollTop();
            if(scroll_pos > 50) {
                $(".navbar").animate({'background-color': 'rgba(255, 255, 255, 0.5)'}, 3000);
            } else {
                $(".navbar").animate({'background-color': 'rgba(0, 0, 0, 0)'}, 3000);
            }
        });
});

Answer 1

不使用动画。像这样通过CSS设置到导航栏的过渡

.navbar { transition: background-color 1s; }

并通过JS更改背景颜色

$(document).ready(function(){
    //var scroll_pos = 0; // you don't need this
        $(document).scroll(function() { 
            //scroll_pos = $(this).scrollTop();
            if(scroll_pos > $(this).scrollTop()) {
                $(".navbar").css('background-color', 'rgba(255, 255, 255, 0.5)');
            } else {
                $(".navbar").css('background-color', 'rgba(0, 0, 0, 0)');
            }
        });
});

用户滚动时使用jQuery更改RGBBA背景颜色

1 个答案: