Tenho um menu fixo com Bootstrap onde fica a logomarca:

 

    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-teal fixed-top">
        <div class="container">
        <a class="navbar-brand" href="index.html"><img src="images/logo.png" class="logo 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>

Porém ao rolar a página,como o menu é fixo, gostaria de diminuir a logomarca. Para isso tentei  da seguinte forma:

**CSS**

    .logo {
        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){
              $("nav").removeClass("logo").addClass("minilogo");
          } else{
              $("nav").removeClass("minilogo").addClass("logo");
          }
      });
    </script>

Só que ao rolar a página, ele está diminuindo a tag **nav** e não a logomarca. Como posso corrigir isso?