Estoy trabajando en un sitio para un cliente y tratando de implementar la funcionalidad de paralaje personalizada. He usado el siguiente código:

 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) }

Funciona bien, excepto que cuando la página se carga inicialmente y el usuario comienza a desplazarse, la posición del elemento ( #header-image img en este caso) cambia abruptamente. Investigué un poco y noté que el valor de getBoundingClientRect().top está causando el problema.

Cuando se carga la página, tiene algún valor, y tan pronto como el usuario comienza a desplazarse, cambia abruptamente a otro valor.

No soy capaz de averiguar por qué sucede esto. Se supone que getBoundingClientRect().top obtiene el valor del elemento desde la parte superior de la ventana gráfica, ¿verdad?

Cualquier ayuda es muy apreciada. ¡Gracias!

Compruebe la captura de pantalla del elemento de inspección aquí: https://i.stack.imgur.com/RYDvK.jpg