¿ Amigos, por que me brinca el efecto del header con el evento Scroll ?
Hola amigos, disculpen estoy practicando un efecto con el Scroll en mi header, pero cuando el div superior aparece, éste aparece muy brusco y también brinca.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body style="padding-bottom: 120em;">
<header>
<div class="logo">
GROVER CRISTOBAL
</div>
<nav>
<ul>
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
<li><a href="">Item 6</a></li>
</ul>
</nav>
</header>
<script src="myScript.js"></script>
</body>
</html>
*,*::before,*::after{
box-sizing: border-box;
margin: 0;
padding: 0;
}
header div{
background: rgb(50, 179, 148);
color: aliceblue;
padding: 1em;
font: 600 1.5em sans-serif;
text-align: center;
text-shadow: 0 3px 3px rgba(0,0,0,.5);
}
nav{
background: linear-gradient(120deg, rgb(52, 126, 196) 20px,rgb(82, 159, 196), rgb(103, 192, 233));
height: 3rem;
}
ul{
display: flex;
justify-content: space-around;
list-style: none;
line-height: 3;
}
ul a{
text-decoration: none;
color: aliceblue;
text-shadow: 0 3px 3px rgba(0,0,0,.5);
}
const div = document.querySelector('div')
const nav = document.querySelector('nav')
addEventListener('scroll' , (e) => {
if(scrollY >= 78){
div.style.display = 'none'
nav.style.position = 'fixed'
nav.style.width = '100%'
}else{
div.style.display = 'block'
}
})