I'm a beginner and would like to know the error of this code:
var nav = $('.topo');
$(window).scroll(function () {
if ($(this).scrollTop() > 136) {
nav.addClass("fixar");
} else {
nav.removeClass("fixar");
}
});
The idea was for the ".topo" header to only appear when the user scrolls.
But, as you can see on the site ( link ), once the site is loaded, the header appears (when it should be hidden until that there was a scroll bar down) and went back to being hidden if the user returned to the top of the page.
.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>