0

Fiz um menu com uma imagem e os botões fixos em meu site. Usando o seguinte código:

<div class="navbar navbar-default  navbar-fixed-top" role="navigation"          style="background-color:#3299CC">
<div>
<img src="img/logo.png" alt="Smiley face" >

</div>


  <div class="container">
<div id="navbar" class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="atividades.html">Atividades</a></li>
    <li><a href="cronograma.html">Cronograma</a></li>
<li><a href="inscricao.html">Inscrição</a></li>
<li><a href="Contato.html">Contato</a></li>

  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="http://www.pet.br/">PET </a></li>
  </ul>
</div>

Mas assim fica a imagem e os botões fixos no topo da tela, eu gostaria de quando eu descesse a barra de rolagem,apenas os botões ficassem fixos no topo da tela e a imagem "sumisse".

1 Resposta 1

1

Você fez certo em colocar sua logo em uma div diferente da div do menu. O que você deve fazer é dar uma classe a essa div (por exemplo <div class="menu-com-logo">) assim que o scroll atingir certa marcação. E essa classe deve ter no CSS o atributo display: none; Para realizar isso se usa jQuery. Um exemplo seria esse:

jQuery("document").ready(function($) {
  var nav = $('.navbar');
  $(window).scroll(function() {
    if ($(this).scrollTop() > 500) {
      nav.addClass("menu-com-logo");
    } else {
      nav.removeClass("menu-com-logo");
    }
  });
});

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 .