So I’m building a website using Bootstrap 5, and I’ve created a navbar with a transparent background and with the help of some javascript, I’m trying to gave the navigation bar change to a solid color when anyone scrolls down. However, with the javascript that I’ve implemented, the color does’t change. The only thing that changes is that when you scroll is the box-shadow at the bottom of the navbar.

.navbar-scrolled{
    background-color: #fff;
    color: #000;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

<script>
  const navEl = document.querySelector('.navbar');

  window.addEventListener('scroll', () => {
    if (window.scrollY >= 56) {
      navEl.classList.add('navbar-scrolled');
    }
    else if (window.scrollY < 56) {
      navEl.classList.remove('navbar-scrolled');
    }
  });
</script>

I tried this code and expected for the navigation bar to change colors when you scroll.