Odwołanie do CSS

0

Witam
W jaki sposób mogę odwołać się w kodzie JS do background-color navbaru w CSS tak aby kiedy pageYOffset będzie równy 0(scroll do samej góry) to kolor tła w navbarze w spowolnionym czasie zaniknie a pozostanie sam tekst(tylko w tym przypadku, scroll w dół to zanik navbaru, scroll w górę to biały background aż do momentu kiedy pageYOffset będzie równy 0)?
JS:

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}

W HTML

<div id="navbar">
<ul>
<li><a href="home">Strona główna</a></li>
<li><a href="Oferta">Oferta</a></li>
<li><a href="Cennik">Cennik</a></li>
<li><a href="Rezerwacja">Rezerwacja</a></li>
<li><a href="Blog">Blog</a></li>
</ul>
</div>

CSS

body{
background-color:blue;
margin:0;
padding:0;
}
#navbar{
background-color: #333;
position: fixed;
top: 0;
width: 100%;
transition: top 0.4s;
}
#navbar ul{
list-style:none;
background:white;
text-align:center;
padding:0;
margin:0;
}
#navbar ul li{
display:inline-block;
text-decoration: none;
}
#navbar ul li a{
text-decoration:none;
color:black;
width: 150px;
display:block;
padding:15px;
font-size:17px;
font-family:Helvetica;
transition:0.4;
}
#navbar ul li a:hover{
background-color:white;
color:brown;
transition:0.7s;
}

3

Może po prostu zdefiniuj animację w CSS a po dojechaniu stroną do samej góry, ustaw w navbarze style.animation

1 użytkowników online, w tym zalogowanych: 0, gości: 1