I am trying to resize the logo when i scroll down using the following event but its not working :

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

Basically my nav bar is fixed so it should work and i am using 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;
          }