Попытка исчезнуть в фоновом режиме моей панели навигации после прокрутки

Question

Если я прокручу вниз на своем веб-сайте, моя панель навигации перейдет от «background-color: transparent» к черному, и если я снова прокручу ее, она снова станет прозрачной ,

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

Это работает, но теперь я хочу, цвет фона, чтобы исчезнуть в при прокрутке вниз, и исчезают, когда прокручивается снова. Я пробовал функции .fadein и .animate из jquery, но они, похоже, не работали для меня. Кто-нибудь есть идеи о том, как это сделать?

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 Это в действии.