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" class="logoid="logo" maxlogoclass="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""#logo").removeClass("maxlogo").addClass("minilogo");
} else{
$("logo""#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?