Tengo un evento de desplazamiento JS simple que cuando un elemento llega a 50px de la parte superior de la ventana, el encabezado se anima y cambia de color, lo que se hace usando getBoundingClientRect().top < 50 en un elemento desencadenante. Esta funcionalidad solo se encuentra en la página de inicio del sitio.
¿Hay alguna forma de que cuando un usuario visite otra URL/página en el sitio y luego regrese a esta página a través de la flecha back del navegador, se siga aplicando el estado de animación anterior? Si la página se vuelve a cargar y comienza nuevamente en la parte superior, no importa, pero si vuelve a hacer clic en la página que usa este código, la transición del menú ocurre incluso si regresa a la parte de la página que estaba más allá del punto de activación. No quiero forzar la página a la parte superior cada vez porque esta página tendrá información que se puede descargar y buscar, por lo que sería un verdadero dolor volver a la parte superior de esa página cada vez.
He dado un ejemplo de trabajo a continuación y a través del enlace CodePen, el problema está, por supuesto, en CodePen y StackOverflow cuando va a una URL diferente y luego hace clic en la URL en cuestión, en realidad vuelve a cargar la página desde cero, lo que no hace No sucede como un comportamiento estándar del navegador en los sitios web cotidianos.
Codepen: https://codepen.io/anna_paul/pen/bGvPWRj
En ese back-end estoy usando PHP, y tengo acceso a esto si es necesario que haya una solución del lado del servidor.
Cualquier idea o sugerencia apreciada.
Nota: en el sitio real, este evento de desplazamiento se invoca a través de una función de rebote, pero lo eliminé para simplificar el código.
let triggerElement = document.getElementById('trigger-element'), header = document.getElementById('h') let menuChange = function() { if(triggerElement.getBoundingClientRect().top < 50) { header.style.background = 'black' header.style.transition = '1s' } else { header.style.background = 'red' header.style.transition = '.15s' } } window.addEventListener('scroll', menuChange) body { margin: 0; height: 200vh; } #h { display: flex; justify-content: center; background: red; color: #fff; position: fixed; top: 0; width: 100%; } #trigger-element { margin-top: 150px; padding: 1rem; background:blue; color: #fff; } <header id="h"> <p>HEADER CONTENT</p> </header> <div id="trigger-element">Trigger Element</div>Recomiendo usar localStorage para este caso de uso particular, porque se puede implementar fácilmente junto con su método actual:
const triggerElement = document.getElementById('trigger-element'); const header = document.getElementById('h'); const animationTriggered = localStorage.getItem('animationTriggered') === 'true'; let initialLoad = true; const menuChange = function() { if (animationTriggered && initialLoad) { header.style.background = 'black'; } else if (triggerElement.getBoundingClientRect().top < 50) { header.style.background = 'black'; header.style.transition = '1s'; localStorage.setItem('animationTriggered', 'true'); } else { header.style.background = 'red'; header.style.transition = '.15s'; localStorage.setItem('animationTriggered', 'false'); } initialLoad = false; } window.addEventListener('scroll', menuChange);Esto recordará el estado anterior y aplicará el color de fondo negro si la animación se activó previamente. Esto agrega una pequeña cantidad de sobrecarga, pero en un escenario del mundo real no debería tener ningún impacto notable en el rendimiento de la aplicación.