使用 javascript 更改滚动上的徽标大小

Question

当我使用以下事件向下滚动时，我正在尝试调整徽标的大小，但它不起作用：

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

基本上我的导航栏是固定的，所以它应该可以工作，我正在使用引导程序 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;
          }

Answer 1

我在 jsfiddle 中使用 jQuery 3.4.1 看到了您的代码。徽标大小调整效果很好。

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