I am developing a site with Sveltekit, it has a massive hero image that fades out as the user scrolls (see below). I want the content behind the image to remain fixed until image is completely faded then the page will start scrolling.

I can't figure out how to get the background to go from position: fixed to position: relative (or something like that) without the content jumping, you can see from the gif below the main image fades slowly revealing the content underneath (which is desired_ but when the image is completely gone and the position changes to relative we just hop down the page to catch up with the scroll:

The above effect is created with this code:

// 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>

I understand that this behaviour is expected when you change position: fixed to position: relative I just don't know what I should be doing to get the effect I want.

So you can see it's mostly vanilla JS and some basic stuff. I'd prefer to do this without bringing in any heavy libraries.