Estoy desarrollando un sitio con Sveltekit, tiene una imagen de héroe masiva que se desvanece a medida que el usuario se desplaza (ver más abajo). Quiero que el contenido detrás de la imagen permanezca fijo hasta que la imagen se desvanezca por completo y luego la página comenzará a desplazarse.

No puedo entender cómo hacer que el fondo pase de la position: fixed a la position: relative (o algo así) sin que el contenido salte, puedes ver en el gif debajo de la imagen principal que se desvanece lentamente revelando el contenido debajo (que es deseado_ pero cuando la imagen desaparece por completo y la position cambia a relative , simplemente saltamos hacia abajo en la página para alcanzar el desplazamiento:

El efecto anterior se crea con este código:

 // this is the function that runs when scroll is detected const scroller = () => { scroller_value = scrolly/height opacity = (ONE) - scroller_value if(scrolly > height - 30){ background_scroll = "position: relative" } else { background_scroll = "position: fixed" } } </script> # this is how svelte binds events and values to the above variables in the function <svelte:window bind:scrollY={scrolly} bind:innerHeight={height} on:scroll={scroller}/> <div class="intro-container"> <div class="intro"> <div class="image" style="opacity: {opacity}; transform: scale({1 * 1 + scroller_value})" /> </div> </div> <div class="bg-page" /> <div class="scroller" style={background_scroll}> content </div> <style> .intro-container { display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; height: 100vh; width: 100vw; color: var(--main-heading); } .intro { position: relative; height: 200vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } .bg-page { position: absolute; height: 200vh; width: 100vw; left: 0; top: 0; bottom: 0; } </style>

Entiendo que se espera este comportamiento cuando cambias de position: fixed a position: relative Simplemente no sé qué debo hacer para obtener el efecto que quiero.

Entonces puedes ver que es principalmente JS vainilla y algunas cosas básicas. Preferiría hacer esto sin traer bibliotecas pesadas.