I am trying to toggle a class on a div when the page is scrolled past another div (s1).

Whenever the page is scrolled to the specified div (s1), the class is not added to the blur div in the browser. I’ve tried numerous configurations of this code. This is the cleanest I’ve come up with but I’m unable to make it run.

The blur needs to be toggled via the ‘active’ class every time the top of s1 is passed, with the default being that ‘active’ is toggled off.

The blur itself works perfectly fine without JS logic.

    <div id="blur--linear-gradient"></div>
    <main>
        <div class="section-content s1"></div>
    </main>

    #blur--linear-gradient {
        display: none;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        inset: 0;
        z-index: -1;
        -webkit-backdrop-filter: blur(10px);
        -moz-filter: blur(10px);
        -o-filter: blur(10px);
        -ms-filter: blur(10px);
        backdrop-filter: blur(10px);
        -webkit-mask: linear-gradient(0deg, transparent, white 50%);
        background: linear-gradient(hsl(var(--depth-HS) / 10%), hsl(var(--white) / 0%));
        transition: all 300ms ease; /* for enabling class on scroll in JS */
    }
    
    #blur--linear-gradient.active {
        display: block;
    }

    var headerContainer = document.getElementById('header-container');
    var blurOverlay = document.getElementById('blur--linear-gradient');
    var scrolledSection = document.getElementsByClassName('s1');
    var scrolledSectionPos = scrolledSection.scrollTop - headerContainer.scrollHeight;
    
    window.addEventListener('scroll', () => {

        var scrollPos = window.scrollTop;
    
        if (scrollPos >= scrolledSectionPos) {
            blurOverlay.classList.toggle('active');
        }
    
    });