set opacity with scrolling jquery

Question

I'm new to programming, and this is my first question here. I'm trying to write a javascript or jquery code that does this for me: I have two div tags with IMG and p tag. I want to change these two divs when the user scrolls the page. I want first the image to become from 0.1 to 1 opacity, and then when the text comes in, the image opacity comes back to 0.1 slowly. Here is a video I made(14 seconds) about what I want to achieve. Can anybody help me with this? I tried .animate on jquery and built this animation, but I don't know how to set it up with scroll. https://streamable.com/1uxpba

Here is my HTML file and it works fine:

<style type="text/css">
    #container {
        display: flex;
        justify-content: center;
    }

    #image {
    }

    #text {
        text-align: justify;
    }

    #image1 {
        position: absolute;
        opacity: 0.1;
    }

    #text1 {
        position: absolute;
        opacity: 1;
        width: 600px;
        height: 500px;
    }

    .content {
        height: 500px;
    }

    .content1 {
        height: 1000px;
    }
</style>
<div class="content"></div>
<div class="container">
    <div id="image1">
        <img id="image"
             src="https://usercontent.one/wp/www.ascent.se/wp-content/uploads/2021/10/ascent-mountain-compass-origin.png"
             alt="image" width="1000px" height="600px">
    </div>
</div>
<div class="content1"></div>
<div class="container">
    <div id="text1">
        <p id="text">
            The word Ascent means ”the path to the top”. We provide guidance to leaders and organisations committed to
            climbing this path. Our services are unique. We combine hard business management experience with the softer
            skills of behavioural science and communication. Our coaching, advising and training services enhance the
            human skills leaders and teams need to achieve and sustain dynamic results.
        </p>
    </div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
            $(window).scroll(function () {
                var fixmeTop = $('#image1').offset().top;
                var fixmeTop1 = $('#text1').offset().top;
                var currentScroll = $(window).scrollTop();
                var imageopacity = 0.1;
                var textopacity = 1;
                console.log("image:" + fixmeTop);
                console.log("text:" + fixmeTop1);
                console.log("currentscroll:" + currentScroll);
                if (currentScroll < fixmeTop) {
                    $("#image1").css('opacity', currentScroll / fixmeTop);
                } else if (currentScroll > fixmeTop && currentScroll <= fixmeTop1 - 600) {
                    $("#image1").css('opacity', 1);
                } else if (currentScroll > fixmeTop1 - 600) {
                    $("#image1").css('opacity', 1 - currentScroll / fixmeTop1);
                } else {
                    $("#image1").css('opacity', imageopacity);
                }
                if (currentScroll > fixmeTop1 + 200) {
                    $("#text1").css('opacity', 1 - currentScroll / 2800);
                } else {
                    $("#text1").css('opacity', textopacity);
                }
                if (currentScroll >= fixmeTop - 5) {
                    $('#image1').css({
                        position: 'fixed',
                        top: '0px',
                    });
                } else {
                    $('#image1').css({
                        position: 'static'
                    });
                }
                if (currentScroll >= fixmeTop1 - 40) {
                    $('#text1').css({
                        position: 'fixed',
                        top: '30px',
                    });
                } else {
                    $('#text1').css({
                        position: 'static'
                    });
                }
            });
        }
    );
</script>

But I'm trying to add the jquery script to a theme that built with wordpress divi builder. Here is the script I wrote for that. But it colapses the website:

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(window).scroll(function () {
            var imagediv = $('#imagediv').offset().top;
            var imagerowdiv = $('#imagerowdiv').offset().top;
            var imagesectiondiv = $('#imagesectiondiv').offset().top;
            var textsection = $('#textsection').offset().top;
            var rowtext = $('#rowtext').offset().top;
            var currentScroll = $(window).scrollTop();
            if (currentScroll > imagediv - 1000 && currentScroll <= imagediv) {
                $("#imagediv").css('opacity', currentScroll / imagediv);
            } else if (currentScroll > rowtext - 1000) {
                $("#imagediv").css('opacity', 1 - currentScroll / rowtext);
            } else {
                $("#imagediv").css('opacity', 0.1);
            }
            if (currentScroll >= imagediv && currentScroll < rowtext) {
                $('#imagerowdiv').addClass("pa-sticky-header");
            } else if (currentScroll >= rowtext && currentScroll < rowtext + 500) {
                $('#imagerowdiv').removeClass("pa-sticky-header");
                $('#rowtext').addClass("pa-sticky-header");
            } else if (currentScroll > rowtext + 500) {
                $('#rowtext').removeClass("pa-sticky-header");
            }
            if (currentScroll > rowtext && currentScroll < rowtext + 500) {
                $("#textdiv").css('opacity', (1 - ((currentScroll - rowtext) / 500)));
            }
        });
    );
</script>

Here is the CSS of the class:

.pa-sticky-header {
    position: fixed!important;
    top: 0;
    width: 100%;
}