Arquivo Discussoes de Programacao e Tecnologia Como fazer troca de classes no evento para fixar o menu em um determinado ponto, consigo fazer em jQuery mas estou tentando mudar o hábito para JS puro.
let fixo = document.getElementsByTagName(‘nav’);
//Arrow function!
fixo.addEventListener('scroll', () =>{
if(window.scrollY >= 100){
fixo.classLIst.add('fixed');
}
else{
fixo.classLIst.remove('fixed');
}
})
Talvez esteja dando problema ai pq a letra i do classList esta em maiúsculo
Bom dia, eu percebi esse erro e tinha corrigido, mesmo assim o nav não está ficando fixo.
Posta o código da classe fixed e o seu html
Só não sei se preciso criar uma determinada função para conseguir ativar a classe oculta.
Ja olhou no console para ver se não esta dando algum erro?
no console dá o seguinte erro, “Erro no processamento do valor de “display”. Declaração ignorada.”
justamente o display fixed da classe .fixo
<style>
*{
margin: 0;
padding: 0;
}
.fixed{
display: fixed;
}
nav{
background: gray;
width: 100%;
height: 100px;
}
nav ul{
width: 500px;
float: right;
}
nav ul li{
display: inline-block;
letter-spacing: 2;
margin: 10px;
}
nav ul li a{
text-decoration: none;
}
section{
background: rgb(247, 236, 236);
height: 700px;
}
footer{
background: #000000;
height: 200px;
}
<header>
<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">home</a></li>
<li><a href="#">home</a></li>
<li><a href="#">home</a></li>
<li><a href="#">home</a></li>
</ul>
</nav>
</header>