1: Você não informou qual versão do bootstrap
está usando.
2: Você não informou se já conseguiu deixar o menu fixo.
Com a ausência dessas informações, fiz um exemplo usando a versão 4.1
do bootstrap
.
Note que eu acrescentei a classe
.sticky-top
no navbar para a mesma ficar fixa. Vale lembrar que que essa classe usa uma positionsticky
, o que ainda não é suportado no IE 11. Para acessar a lsita completa dos navegadores que oferecem suporte, consulte aqui.
Basicamente você precisará ficar escultando
o evento de scroll
e verificar quando o mesmo chegar em um determinado valor que você definir, após isso, você esconde e mostra a imagem conforme necessidade.
A variável length
foi declarada para você testar com outros valores.
Recomendo tirar o comentário do console.log()
para ver o funcionamento da captura do scroll
.
$(document).on('scroll', function(){
let scroll = $(document).scrollTop();
let length = 100;
//console.log('scroll: '+ scroll);
if(scroll > length) {
$('#brand-image').hide();
} else {
$('#brand-image').show();
}
});
.main {
height: 1000px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-primary">
<a class="navbar-brand" href="#">
<img id="brand-image" alt="Website Logo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSgZ_2jtGVpp0G-t966PJgbdGVgJ71RFXH7_5syQEl3WNaPBUmr"/>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
<div class="main">
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>