javascript - 滚动后尝试淡入导航栏的背景颜色

Question

如果我在我的网站上向下滚动，我的导航栏将从“背景颜色:透明”变为黑色，如果我再次向上滚动，它会再次变为透明。

var positionSmall = 0;
    $(document).scroll(function () {
        positionSmall = $(this).scrollTop();
        if (positionSmall > 140) {
            $(".navbar").css('background-color', '#222222');
        } else {
            $(".navbar").css('background-color', '');
        }
    });

这行得通，但我现在希望背景颜色在向下滚动时淡入，再次向上滚动时淡出。我试过 jquery 的 .fadein 和 .animate 函数，但它们似乎对我不起作用。有人对如何执行此操作有任何想法吗？

Answer 1

无需 jQuery，您可以使用 CSS 实现。只需向您的 .navbar 类添加一个过渡，即使更改是在 jQuery 中进行的，它也会为过渡设置动画。

代码:

.navbar {
    -webkit-transition: background-color 0.5s ease-in-out;
    -moz-transition: background-color 0.5s ease-in-out;
    -ms-transition: background-color 0.5s ease-in-out;
    -o-transition: background-color 0.5s ease-in-out;
    transition: background-color 0.5s ease-in-out;
}

现在您只需要修改时间就可以了。 Here它在行动吗？