He explorado algunos enfoques para esto, pero ninguno parece funcionar exactamente como me gustaría:
Aquí hay un ejemplo de comportamiento que me gustaría, pero no rendimiento/experiencia (debido a que el comportamiento se implementa mediante el evento de scroll , no es fluido).
También intenté usar la transformación CSS, que al desplazarse hacia abajo agregaría una clase para ocultar la barra de navegación, y al desplazarse hacia arriba eliminaría la clase, animando la barra de navegación ocultando/mostrando, pero el problema es que la velocidad de la animación está desconectada con la velocidad de desplazamiento .
También probé la posición fija de CSS, pero parece que necesito lo contrario de lo que proporciona.
¿Hay alguna otra manera de hacer que esto funcione bien?
Revisé su problema y creo que encontré un enfoque simple.
con esta sencilla función puede obtener la cantidad de píxeles que el usuario ha desplazado.
window.onscroll = function (e) { console.log(window.scrollY); // Value of scroll Y in px }; después de que el usuario desplace la cantidad deseada de píxeles, haga que la barra de progreso sea fixed top (o position:fixed;top:0 )
Al verificar el enlace que proporcionó, parece funcionar como se esperaba ( desea que esté vinculado al evento de desplazamiento ya que desea que se mueva como "estático" ). Sin embargo, si se tambalea en algún sistema debido a eventos de desplazamiento inconsistentes, puede intentar agregar una propiedad de transition con una duración lo suficientemente pequeña. Tenga en cuenta que esto solo debe habilitarse mientras la propiedad de posición permanezca igual; de lo contrario, al cambiar de "absoluto" a "fijo" se estropearían las cosas, ya que el origen de coordenadas cambia.
Así que puedes agregar otra variable let changedPosition = false; y cada vez que cambie la propiedad de position , puede hacer
if (position !== "absolute") { changedPosition = true; } else { changedPosition = false; } position = "absolute";o
if (position !== "fixed") { changedPosition = true; } else { changedPosition = false; } position = "fixed";y cuando aplicas el estilo haz
navbar.style = `position: ${position}; top: ${navbarTop}px; transitiona: ${ changedPosition ? "none" : "100ms linear" }`;como https://codepen.io/gpetrioli/pen/XWVKxNG?editors=0010
Debería jugar un poco con las propiedades de transición que proporciona, solo pongo algunos valores de muestra allí.