COMO CRIAR MENU NAVBAR COM EFEITO SCROLL O MENU SE MOVE DEPENDENDO DO DA POSIÇÃO DO E MOVIMENTO DO SCROLL
CÓDIGO FONT:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>menuscroll</title>
<style>
*{
margin: 0;
padding: 0;
}
*::before, *::after{
box-sizing: border-box;
}
body{
background-color: #6200ff;
height: 1200px;
}
header#nav{
width: 100%;
height: auto;
padding: 30px 0;
background-color: #000;
transition: 0.5s;
}
div.nav{
width: 99%;
height: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
a.logo{
width:20%;
}
a.logo img{
width: 100%;
}
ul.nav{
display: flex;
align-items: center;
gap: 2rem;
list-style: none;
}
ul.nav a{
color: #ffffff;
text-decoration: none;
}
ul.nav a:hover{
color: #00d9ff;
text-decoration: underline;
}
</style>
</head>
<body>
<header id="nav">
<div class="nav">
<a href="menuscroll.html" class="logo"><img src="logo400.png" alt=""></a>
<ul class="nav">
<a href=""><li>Serviços</li></a>
<a href=""><li>Clentes</li></a>
<a href=""><li>Contactos</li></a>
<a href=""><li>Ajuda</li></a>
<a href=""><li>Sobre</li></a>
</ul>
</div>
</header>
<script>
let nav=document.querySelector('header#nav')
let posicaoInicial=pageYOffset
window.addEventListener('scroll',function(){
let posicaoAtual=pageYOffset
if(posicaoInicial>=posicaoAtual){
nav.style.marginTop='0'
nav.style.position='fixed'
}
else{
nav.style.marginTop='-100%'
}
posicaoInicial=posicaoAtual
})
</script>
</body>
</html>
0 Comentários