0

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?

2
  • É porque vc está alterando a classe da nav e não da imagem.
    – Sam
    Commented 6/08/2019 às 0:18
  • 1
    Desculpe Sam. Funcionou. Obrigado!
    – user24136
    Commented 6/08/2019 às 0:27

0