I am trying to get my navbar to change colour when a user scrolls down the page. Im trying to do this in Bootstrap 5, i've looked at a few videos and posts and all of the examples i've found dont seem to be working with Bootsrap 5. I want the navbar to change from a transparent background, to a white one when the user scrolls down past the hero image. Code is below if anyone can help?

HTML

  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">Portfolio</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <!-- Dropdown -->
          <li class="nav-item dropdown ms-auto">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
              data-bs-toggle="dropdown" aria-expanded="false">
              My Projects
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <li><a class="dropdown-item" href="#ms1">Project 1</a></li>
              <li><a class="dropdown-item" href="#ms2">Project 2</a></li>
              <li><a class="dropdown-item" href="#ms3">Project 3</a></li>
              <li><a class="dropdown-item" href="#ms4">Project 4</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>

CSS Code

.bg-white {
  background: green !important;
  transition: 1.5s ease-in;
}

.bg-white.scrolled {
  background: red !important;
}

JavaScript

$(window).scroll(function(){
  $('nav').toggleClass('scrolled', $(this).scrollTop() > 500);
  });