Help with Issue in Firefox on page reload

JavaScript
1

The page loads fine the first time however upon refresh the stickyPos comes back incorrectly and causes the image to stick prematurely. After a few refreshes it will fix itself again until it refreshes again. Im not sure what might be the cause of this as it works as expected in the other browsers including mobile.

Website

const stickyElement = (pos,element) =>{
    let stickyPos = document.getElementById(element).offsetTop - document.documentElement.clientHeight * pos;
    let elmt = document.getElementById(element);
    return function () {
        let scrollPos = window.pageYOffset;
        // console.log(scrollPos);
        // console.log(`Sticky = ${stickyPos}`)
        if(scrollPos >= stickyPos){
            elmt.classList.add("sticky");
        }else{
            elmt.classList.remove("sticky");
        }
    }
}

css:
.sticky {
      position:fixed;
      top: 50vh;
    }