Tenho um menu fixo com Bootstrap onde fica a logomarca:

 

   

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

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

**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>

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