Question

如果我在我的网站上向下滚动，我的导航栏将来自＆＃34; background-color：transparent＆＃34;为黑色，如果我再次向上滚动，它会再次变为透明。

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它正在发挥作用。

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

1 个答案: