How to decrease the logo when scrolling the page in the Bootstrap fixed menu?

Question

I have a fixed menu with Bootstrap where the logo is:

           <div class="container">
        <a class="navbar-brand" href="index.html"><img src="images/logo.png" id="logo" class="maxlogo img-responsive"></a>
          <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
    </div>
    </nav>

However when scrolling the page,as the menu is fixed, I would like to decrease the logo. For this I tried as follows:

CSS

  .maxlogo {
    position: absolute;
    z-index: 999999999999;
    margin-top: -30px;
    width: 180px;
}
.minilogo {
    position: absolute;
    z-index: 999999999999;
    margin-top: -30px;
    width: 100px;
}

Jquery

<script>
  $(document).on("scroll",function(){
      if($(document).scrollTop()>100){
          $("#logo").removeClass("maxlogo").addClass("minilogo");
      } else{
          $("#logo").removeClass("minilogo").addClass("maxlogo");
      }
  });
</script>

Only by scrolling the page, it’s slowing down the tag Nav and not the logo. How can I fix this?