4

Estou criando um menu com a versão 4.1.3 do Bootstrap e gostaria de saber como posso fazer para ao rolar a página a logo desaparecer? No caso, só o menu deve ficar.

Obs.: Ao voltar a posição inicial a logo deverá reaparecer.

O menu já está fixo

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">
    <img id="brand-image" alt="Website Logo" src="img/logo.png" />
  </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>

CSS

#brand-image {
  height: 100px;
  float: center;
}

.navbar {
  position: fixed;
  padding-top: 15px;
  top: 0;
  z-index: 2;
  width: 100%;
}

.navbar-brand {
  position: absolute;
  left: 50%;
  margin-left: -50px;
  display: block;
  margin-top: 18px;
}
2
  • Primeiro: qual a versão do bootstrap você está usando? Commented 21/09/2018 às 14:05
  • A última versão a 4.1.3
    – GhostX
    Commented 21/09/2018 às 14:19

3 Respostas 3

4

Primeiro para para esse efeito ser válido seria interessante você deixar seu menu sempre fixo no topo da página. Para isso precisa usar a classe .fixed-top na navbar (veja na documentação oficial).

Depois como um jQuery simples (o jQuery já faz parte do Bootstrap então não tem problema usá-lo) é possível fazer um fadeOut e fadeIn no evento scroll.

Para ver o resultado veja o exemplo abaixo. Deixei comentado o lugar onde você controla a "distância" do scroll antes da logo sumir.

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= 140) { // 140 é a distancia que vc rola antes da logo sumir
    $("#brand-image").fadeOut();
  } else {
    $("#brand-image").fadeIn();
  }
});
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
  <a class="navbar-brand" href="#">
    <img id="brand-image" alt="Website Logo" src="https://placecage.com/50/50" />
  </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 style="height:1000px; width: 100ps;"></div>

8
  • não seria interessante ter uma pequena explicação de como fazer um throttle ou debouce do handler de evento? Pois se você colocar um console.log no handler de evento vai ver que a função executa muitas vezes e pode deixar a página lenta. Commented 21/09/2018 às 14:52
  • E deixar o $("#brand-image") fora do handler também, por motivos de perfomance. Commented 21/09/2018 às 14:53
  • @fernandosavio tem como fazer um debounce de forma simples?é só usar um _.debounce antes da function e no final colocar o valor do "intervalo"? Vou testar aqui... Eu não entendo muito de jQuery :)
    – hugocsl
    Commented 21/09/2018 às 15:02
  • Acho que a maneira mais fácil é usar o debounce do lodash. Assim o código segue curto e não foge muito do escopo da pergunta. Qualquer coisa eu faço um fiddle no início da tarde e comento aqui pra você analisar Commented 21/09/2018 às 15:06
  • @fernandosavio encontrei esse material, parece bem interessante! origamid.com/codex/diminuir-o-menu-fixo-ao-scroll _.debounce
    – hugocsl
    Commented 21/09/2018 às 15:07
3

Esta resposta é apenas um complemento à resposta do @hugocsl.

Quando se fala de eventos como scroll, resize ou mousemove é sempre importante lembrar que eles são lançados várias vezes por segundo enquanto o usuário interage com a página. Ou seja, dependendo do quê você faz dentro da função handler do evento, você pode deixar sua página lenta (ex.: acessar o DOM).

Se não há necessidade de executar esta função tão repetidamente você pode usar as técnicas debounce e throttle, que servem para limitar a execução de uma função em um período de tempo.

O debounce vai esperar que o evento pare de ser lançado por X segundos antes de ativar a função handler.

O throttle só vai permitir que a função handler seja executada a cada X segundos.

Exemplo:

// Só vai executar quando o usuário para de digitar por 1 segundo
$elemento.on('keyup', _.debounce(function() {
    console.log('debounce');
}, 1000));


// Enquanto o usuário seguir digitando, vai executar a cada segundo
$elemento.on('keyup', _.throttle(function() {
    console.log('throttle');
}, 1000));

Outra otimização, bem mais simples, é salvar o elemento DOM em uma variável para usar depois, visto que o acesso ao DOM é custoso em termos de performance.

Ao invés de:

$(window).scroll(function() {
    // é executado cada vez que 'scroll' é lançado
    $("#brand-image").fadeOut();
});

É mais performático usar:

// É executado apenas uma vez
var $brandImage = $("#brand-image");

$(window).scroll(function() {
    // Usa a refêrencia salva anteriormente
    $brandImage.fadeOut();
});

E a última e menos impactante é que, quando você faz:

$(window).scrollTop()

Você está convertendo um DOMElement em um objeto jQuery, não é tão custoso quanto acessar o DOM, mas ainda sim pode ser facilmente substituído pela propriedade window.pageYOffset que é nativo e a compatibilidade é aceitável (IE 9+).


Abaixo segue o código do @hugocsl com o handler de eventos normal, com debounce e com throttle para ilustrar a importância destas técnicas.

PS: Nos exemplos estou usando os métodos _.debounce() e _.throttle() da biblioteca lodash.


Normal

var $brandImage = $("#brand-image");
var $scrollHelper = $("#scroll-helper");
var count_scroll = 0;

$(window).scroll(function() {
  $scrollHelper.html("scroll triggered: " + ++count_scroll);
  if (this.pageYOffset >= 140) { // 140 é a distancia que vc rola antes da logo sumir
    $brandImage.fadeOut();
  } else {
    $brandImage.fadeIn();
  }
});
#scroll-helper {
  position: fixed;
  top: 80px;
  left: 10px;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
  <a class="navbar-brand" href="#">
    <img id="brand-image"src="https://placecage.com/50/50" />
  </a>
  <button class="navbar-toggler">
    <span class="navbar-toggler-icon"></span>
  </button>
</nav>

<div style="height:1000px; width: 100ps;"></div>
<span id="scroll-helper">scroll triggered: 0</span>


Debounce

var $brandImage = $("#brand-image");
var $scrollHelper = $("#scroll-helper");
var count_scroll = 0;

$(window).scroll(_.debounce(function() {
  $scrollHelper.html("scroll triggered: " + ++count_scroll);
  if (this.pageYOffset >= 140) { // 140 é a distancia que vc rola antes da logo sumir
    $brandImage.fadeOut();
  } else {
    $brandImage.fadeIn();
  }
}, 300));
#scroll-helper {
  position: fixed;
  top: 80px;
  left: 10px;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/[email protected]/lodash.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
  <a class="navbar-brand" href="#">
    <img id="brand-image"src="https://placecage.com/50/50" />
  </a>
  <button class="navbar-toggler">
    <span class="navbar-toggler-icon"></span>
  </button>
</nav>

<div style="height:1000px; width: 100ps;"></div>
<span id="scroll-helper">scroll triggered: 0</span>


Throttle

var $brandImage = $("#brand-image");
var $scrollHelper = $("#scroll-helper");
var count_scroll = 0;

$(window).scroll(_.throttle(function() {
  $scrollHelper.html("scroll triggered: " + ++count_scroll);
  if (this.pageYOffset >= 140) { // 140 é a distancia que vc rola antes da logo sumir
    $brandImage.fadeOut();
  } else {
    $brandImage.fadeIn();
  }
}, 300));
#scroll-helper {
  position: fixed;
  top: 80px;
  left: 10px;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/[email protected]/lodash.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
  <a class="navbar-brand" href="#">
    <img id="brand-image"src="https://placecage.com/50/50" />
  </a>
  <button class="navbar-toggler">
    <span class="navbar-toggler-icon"></span>
  </button>
</nav>

<div style="height:1000px; width: 100ps;"></div>
<span id="scroll-helper">scroll triggered: 0</span>

3
  • 1
    Cara essa resposta é tão interessante que merecia uma Pergunta só para ele rss. Muito obrigado pelo esclarecimento!
    – hugocsl
    Commented 21/09/2018 às 18:26
  • 1
    Valeu! Que bom que ajudou! Commented 21/09/2018 às 18:30
  • Excelente resposta. :) +1 Commented 28/09/2018 às 18:27
3

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-topno navbar para a mesma ficar fixa. Vale lembrar que essa classe usa uma position sticky, o que ainda não é suportado no IE 11. Para acessar a lista completa dos navegadores que oferecem suporte, consulte aqui. Caso preferir, utilize a classe fixed-top.

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .