Add blur effect to element on scrollY past other div

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.

    <header>
        <div id="blur--linear-gradient"></div>
        <div id="header-container"></div>
    </header>

    <main>
        <div class="section-content s1"></div>
    </main>

    #blur--linear-gradient {
        display: none;
    }
    
    #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');
        }
    
    });