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; }
He visto tu código en jsfiddle con jQuery 3.4.1. El cambio de tamaño del logotipo funciona bien.
here is the link: https://jsfiddle.net/6kn52jbm/ .lrg-logo{ max-width: 105px; } .sml-logo{ max-width: 60px; } nav { background-color: rgba(97, 95, 95, 0.103); transition: 0.4s; overflow: hidden; position:fixed; top: 0; left: 0; } p{ margin-top: 150px; margin-left: 100px; }