Использовать jQuery для анимации панели навигации в прокрутке

Question

Могу ли я использовать jQuery для анимации моей панели навигации, чтобы она меняла цвет над прокруткой? Когда я прокручиваю вверх, мне нужна панель навигации с фоном цвета rgba (51, 51, 51, 0.3) и rgba (255, 255, 255, 1) при прокрутке 600 пикселей вниз.

Я знаю, что можно сделать это с чем-то вроде:

$(window).bind('scroll', function() { 
    if ($(window).scrollTop() > 600) { 
     $('.navbar-container-fixed').addClass('white'); 
    } 
    else if ($(window).scrollTop() < 600) { 
     $('.navbar-container-fixed').removeClass('white'); 
    } 
}); 

но изменит цвет без анимации. Я хочу прогрессивное изменение цвета, так что цвет фона постепенно меняется на белый, когда вы идете по странице. Так, чтобы это происходило следующим образом:

0 px from top: rgba(51, 51, 51, 0.3) 

100px from top: rgba(85, 85, 85, 0.4167) 

200px from top: rgba(119, 119, 119, 5.334) 

и так далее.

Answer 1

как насчет проверки максимальной доступной высоты прокрутки и установки цвета в соответствии с прокрученным положением?

$(window).bind('scroll', function() { 
 
    var col_var = Math.round((255/$("body")[0].scrollHeight)*$(window).scrollTop()); 
 
    $(".navbar-container-fixed").css({ 
 
     "background-color":"rgb("+col_var+","+col_var+","+col_var+")" 
 
    }); 
 

 
});

.navbar-container-fixed{ 
 
    display:block; 
 
    width:50px; 
 
    height:2000px; 
 
    background:black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="navbar-container-fixed"></div>