I'm working on a site for a client and trying to implement custom parallax functionality. I have used the following code -

var inView = function(element) {
    // get window height
    var windowHeight = window.innerHeight;
    // Get Element Height
    var elementHeight = element.clientHeight;
    // get number of pixels that the document is scrolled
    var scrollY = window.scrollY || window.pageYOffset;

    // get current scroll position (distance from the top of the page to the bottom of the current viewport)
    var scrollPosition = scrollY + windowHeight;

    var elementPosition = element.getBoundingClientRect().top + scrollY;

    var elementScrolled = elementPosition + element.clientHeight + windowHeight

    // is scroll position greater than element position? (is element in view?)
    if (scrollPosition > elementPosition && scrollPosition < elementScrolled) {
    return true;
    }
    return false;
}

// Get all the elements to be parallaxed
const parallaxElements = {
    element: document.querySelectorAll('#header-image img'),
    ratio: 0.25
}

// The parallax function
const parallax = elements => {
    let items       = [...elements.element],
        itemRatio   = elements.ratio

    if ('undefined' !== items && items.length > 0 ) {
        items.forEach( item => {
            if ( inView(item) == true ) {
                item.style.transform = 'translate3d(0, ' + (itemRatio * (window.innerHeight - item.getBoundingClientRect().top)) + 'px ,0)'
            }
        })
    }
}

//If element is in viewport, set its position
parallax(parallaxElements)

//Call the function on scroll
window.onscroll = () => {
    parallax(parallaxElements)
}

It's working ok except that when the page is loaded initially and the user starts scrolling, the position of element (#header-image img in this case) changes abruptly. I did some digging and noticed that the value of getBoundingClientRect().top is causing the issue.

When the page is loaded, it has some value, and as soon as the user starts scrolling, it abruptly changes to another value.

I am not able to figure out why this is happening. getBoundingClientRect().top is supposed to get the value of element from top of viewport, right?

Any help is greatly appreciated. Thanks!

Pls check the screenshot of inspect element here - https://i.stack.imgur.com/RYDvK.jpg