Change class on scroll

https://toster.ru/q/496880

HTML

<nav class="navbar navbar-top" id="navbar">Navbar</nav>

CSS

body {
    height: 1000px;
}

.navbar {
    padding: 15px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: all 1.3s ease-in-out;
}

.navbar-top {
    background: #eee;
}

.navbar-scroll {
    background: red;
     transition: all 1.3s ease-in-out;
      padding: 25px;
}

JavaScript

function fc(){
  let nav = document.querySelector('.navbar');
    if (window.pageYOffset > 10) {
       nav.classList.add('navbar-scroll');
    } else {
      nav.classList.remove('navbar-scroll');
    }
}

window.onscroll=fc;
fc();