0

Sou iniciante e gostaria de saber qual o erro deste código:

var nav = $('.topo');

$(window).scroll(function () {
    if ($(this).scrollTop() > 136) {
        nav.addClass("fixar");
    } else {
        nav.removeClass("fixar");
    }
});

A ideia era pra que o header ".topo" só aparecesse quando o usuário rolasse o scroll.

Mas, como podem ver no site ( http://www.williamgama.com ), assim que o site é carregado, o header aparece (quando deveria ficar oculto até que houvesse uma movimentação da barra de rolagem para baixo) e voltasse a ficar oculto caso o usuário voltasse a topo da página.

.topo {
        display: block;
        width: 100%;
        height: auto;
        background: transparent;
        z-index: 3;
}

.fixar {
        position: fixed;
        margin: 0;
        top: 0px !important;
        height: 64px;
        background: rgb(255, 255, 255);
        display: block;
        overflow: hidden;
        box-shadow: 0 7px 7px rgba(0, 0, 0, 0.1), 0 7px 7px rgba(0, 0, 0, 0.1);
        transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out;
}

html:

<div class="topo fixar">

  <img src="img/logo/logo.svg">

  <nav class="menu-web position">

    <ul>
      <li><a href="#inicio">Início</a></li>
      <li><a href="#o-estudio">O Estúdio</a></li>
      <li><a href="#atuacao">Atuação</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#depoimentos">Depoimentos</a></li>
      <li><a href="#sobre-william">Sobre William</a></li>
      <li><a href="#contato">Contato</a></li>
    </ul>

  </nav>

</div>

1 Resposta 1

2

Você está iniciando o HTML com a classe .fixar. Remova ela do seu html e tudo deve ser resolvido.

Troque isso:

<div class="topo fixar">

Por isso:

<div class="topo">

Explicando: Não existe um erro no seu código que está gerenciando a classe para deixar o menu fixado. O que acontece é que o jQuery está encarregado de adicionar a classe dinamicamente, logo, você não precisa se preocupar com isso. Defina apenas o estilo inicial do menu e deixe que o jQuery adicione a classe para torná-lo fixo.

Se você notar bem em seu site, ele começa com a classe fixar mas se você fizer um pequeno scroll, ela será removido e só voltará a ser adicionada após passar os 136px de distância do topo que você definiu.

2
  • Muito obrigado, Celsom! Excelente explicação.
    – Will
    Commented 21/03/2016 às 23:26
  • Acesse e veja o resultado final: www.williamgama.com Tudo graças à sua colaboração. Muito obrigado novamente, irmão.
    – Will
    Commented 21/03/2016 às 23:38

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 .