Estoy tratando de cambiar el tamaño del logotipo cuando me desplazo hacia abajo usando el siguiente evento, pero no funciona:

 I am using both classes lrg-logo and sml-logo in my css still nothing is working. $(function() { var logo = $(".lrg-logo"); $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 80) { if(!logo.hasClass("sml-logo")) { logo.hide(); logo.removeClass('lrg-logo').addClass("sml-logo").fadeIn( "slow"); } } else { if(!logo.hasClass("lrg-logo")) { logo.hide(); logo.removeClass("sml-logo").addClass('lrg-logo').fadeIn( "slow"); } } }); });

Básicamente, mi barra de navegación está arreglada, por lo que debería funcionar y estoy usando Bootstrap 5

html:

 <nav class="navbar navbar-expand-lg navbar-light fixed-top"> <a class="navbar-brand" href=""> <img class="lrg-logo" src="./images/logo.png" alt="Logo"> </a> </nav>

CSS:

 .lrg-logo{ margin: 50px; max-width: 105px; } .sml-logo{ margin: 20px; max-width: 60px; } .navbar { background-color: rgba(97, 95, 95, 0.103); transition: 0.4s; overflow: hidden; position: fixed; }