Estoy tratando de hacer que mi barra de navegación cambie de color cuando un usuario se desplaza hacia abajo en la página. Estoy tratando de hacer esto en Bootstrap 5, miré algunos videos y publicaciones y todos los ejemplos que encontré no parecen funcionar con Bootstrap 5. Quiero que la barra de navegación cambie de un fondo transparente a un uno blanco cuando el usuario se desplaza hacia abajo más allá de la imagen del héroe. El código está debajo si alguien puede ayudar.

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>

Código CSS

 .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); });