滾動后嘗試淡入導航欄的背景色

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;
}

現在您只需要修改時間，就可以了。 這是它在行動。