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>