Tengo una imagen en un div de posición fija. El siguiente código está desvaneciendo la imagen donde quiero, pero inicialmente la imagen es visible. Una vez que empiezo a desplazarme, desaparece y luego vuelve a aparecer cuando debería. Tratando de averiguar por qué se muestra la imagen en la carga de la página.
const checkpoint = 500; window.addEventListener("scroll", () => { const currentScroll = window.pageYOffset; if (currentScroll <= checkpoint) { opacity = 0 - currentScroll / checkpoint; } else { opacity = 1; } document.querySelector(".sticky-logo-fade-in").style.opacity = opacity; });Puede almacenar la devolución de llamada en una variable y luego llamarla al cargar la página:
const checkpoint = 500; const scrollHandler = () => { const currentScroll = window.pageYOffset; if (currentScroll <= checkpoint) { opacity = 0 - currentScroll / checkpoint; } else { opacity = 1; } document.querySelector(".sticky-logo-fade-in").style.opacity = opacity; } window.addEventListener("scroll", scrollHandler); scrollHandler();