ScrollTop calculation wrong when scrolling faster

Question

I am having trouble with a an animation that transforms elements at certain scroll positions. The script below is working but when I scroll faster the calculations are no longer accurate. This must be to do with the events happening faster than the callback can handle, are there changes I can make to stop this from happening. No doubt my code is messy and I should be restructuring it to avoid this issue.

Jquery

function changeCss () {
    
    var bodyElement = document.querySelector("body");
    var screenElement = document.querySelector(".screen-scroll");
    var subHeadingElement1 = document.querySelector(".heading-1-scroll");
    var subHeadingElement2 = document.querySelector(".heading-2-scroll");

    var scrollPos = $(window).scrollTop();
    
    var screenset = 2.2 - (scrollPos / 1665);
    
    var subheadingopacity1 = ((scrollPos - 2100) / 100);
    var subheadingtransformY1 = ((2200 - scrollPos) / 1) + "px";
    
    var subheadingopacity2 = ((scrollPos - 2150) / 100);
    var subheadingtransformY2 = ((2250 - scrollPos) / 1) + "px";

    if(this.scrollY >= 50 && this.scrollY <= 1998 ) {
        $(screenElement).css('transform', "matrix(" + screenset + ", 0, 0, " + screenset + ", 0, 0)");
      
    }
    
    if(this.scrollY >= 2100, this.scrollY <= 2200 ) {
        $(subHeadingElement1).css('opacity', subheadingopacity1);
        $(subHeadingElement1).css('transform', "translateY(" + subheadingtransformY1 + ")");
    }
    
    if(this.scrollY >= 2150, this.scrollY <= 2250 ) {
        $(subHeadingElement2).css('opacity', subheadingopacity2);
        $(subHeadingElement2).css('transform', "translateY(" + subheadingtransformY2 + ")");
    }

}
window.addEventListener("scroll", changeCss , false);

HTML

<section style="max-width: 100%; height: 275vh; min-height: 3464px; overflow: initial; margin-top:0; margin-left: auto; margin-right: auto; display: block; width: 100%">
    
    <div style="position: sticky; min-height: 100vh; overflow: hidden; top: 0; width: 100%; background-color: #ffffff; will-change: transform;">
    
        <div class="screen-scroll" style="will-change: transform; z-index: 2; right: 0; margin-top: 120px; transform-origin: center 200px; max-width: 1200px; height: 734px; position: relative; left: 50%; margin-left: -600px;">
            <img src="../../../images/products/md8/macbook-empty.jpg" width="100%" alt="" style="height: auto;" />
        </div>
        
        <div style="position: relative; left: 0; right: 0; bottom;0; box-sizing: border-box; width: 87%; max-width: 820px; margin: 0 auto; padding: 0 0 165px; text-align: center; color: #121212; will-change: opacity, transform;">
            <h1 class="heading-1-scroll round-panel-resp-title" style="opacity: 0; transform: translateY(100px); will-change: opacity, transform; margin-top: 50px; width:100%;">Test Header</h1>
            <p class="heading-2-scroll round-panel-resp-body prodTextAlignCenter main-link-blue" style="width:100%; opacity: 0; transform: translateY(100px); will-change: opacity, transform;">Test body</p>
        </div>
    
    </div>
    
</section>