Grover Cristobal@grovercristobal
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.
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <link rel="stylesheet" href="styles.css"> 8 <title>Document</title> 9</head> 10<body style="padding-bottom: 120em;"> 11 <header> 12 <div class="logo"> 13 GROVER CRISTOBAL 14 </div> 15 <nav> 16 <ul> 17 <li><a href="">Item 1</a></li> 18 <li><a href="">Item 2</a></li> 19 <li><a href="">Item 3</a></li> 20 <li><a href="">Item 4</a></li> 21 <li><a href="">Item 5</a></li> 22 <li><a href="">Item 6</a></li> 23 </ul> 24 </nav> 25 </header> 26 27 <script src="myScript.js"></script> 28</body> 29</html>
1*,*::before,*::after{ 2 box-sizing: border-box; 3 margin: 0; 4 padding: 0; 5} 6header div{ 7 background: rgb(50, 179, 148); 8 color: aliceblue; 9 padding: 1em; 10 font: 600 1.5em sans-serif; 11 text-align: center; 12 text-shadow: 0 3px 3px rgba(0,0,0,.5); 13} 14nav{ 15 background: linear-gradient(120deg, rgb(52, 126, 196) 20px,rgb(82, 159, 196), rgb(103, 192, 233)); 16 height: 3rem; 17 18} 19ul{ 20 display: flex; 21 justify-content: space-around; 22 list-style: none; 23 line-height: 3; 24} 25ul a{ 26 text-decoration: none; 27 color: aliceblue; 28 text-shadow: 0 3px 3px rgba(0,0,0,.5); 29}
1const div = document.querySelector('div') 2const nav = document.querySelector('nav') 3 4addEventListener('scroll' , (e) => { 5 if(scrollY >= 78){ 6 div.style.display = 'none' 7 nav.style.position = 'fixed' 8 nav.style.width = '100%' 9 }else{ 10 div.style.display = 'block' 11 } 12})
Escribe una respuesta