Hola a todos,

Estoy trabajando en el sitio web de un pequeño proyecto escolar, y quiero hacer que mi encabezado y barra de navegación cambien cuando me desplace más allá de un punto determinado.

Hasta ahora todo bien, me las arreglé para hacer eso. Sin embargo, hay un punto en el que el sitio web comienza a enloquecer y cambia muy rápido entre los dos estados que configuré, como se puede ver aquí:

https://youtu.be/1GBXIbESnu0

Además, la velocidad del desplazamiento se ralentiza significativamente al llegar al punto de cambio/donde se asusta, aunque supongo que simplemente se debe a que la función se invoca muchas veces.

Como se puede ver en el código, intenté agregar algún tipo de enfriamiento en la función, esto realmente no funcionó (lo probé de algunas maneras más que la que está actualmente en el código).

Usaré el encabezado como ejemplo de código, ya que el encabezado y la barra de navegación se vuelven locos de la misma manera.

HTML

 <header id="header"> <div> <h1 class="invisible">----</h1> </div> </header>

CSS

 header{ background-color: #227C9D; position: sticky; top: 0; z-index: 2; height: 100px; transition: 0.2s; }

JavaScript

 var header; var nav; var delay = 800; var lastChange = 0; function scrollFunction() { header = document.getElementById("header"); nav = document.getElementById("nav"); if (document.body.scrollTop > 50 ) { if (lastChange >= (Date.now())) return; header.style.height = "50px"; nav.style.fontSize = "20px"; } else { if (lastChange >= (Date.now())) return; header.style.height = "100px"; nav.style.fontSize = "40px"; } lastChange = Date.now(); }

Código completo: https://github.com/DefenetlyNotSimon/InfoWebsiteProjekt/blob/beta/styles.css

Si alguien tiene alguna idea o solución, se lo agradecería :D