On Scroll Text – When page is reloaded is causing a big shift(jump)

I am trying to create a marquee text that moves when the page is scrolled, at the moment I am getting the functionality but for e.g if I reload the page at a certain position the text is shifting(jumping) too much giving a not so desirable effect.
This is the codepen link : https://codepen.io/endritibra-the-flexboxer/pen/xxyZJbb
This is the code:

<div class="marqueeContainer">

  <div class="marqueeText">
    <h1>Endrit</h1>
    <h1>As</h1>
  </div>
  <div class="marqueeText">
    <h1>Artan</h1>
  </div>
  
  
</div>

<div class="container">
  <h2>Hahahahahah</h2>
  <h2>Hahahahahah</h2>  
<h2>Hahahahahah</h2>  
<h2>Hahahahahah</h2> 
 <h2>Hahahahahah</h2>
  <h2>Hahahahahah</h2> 
 <h2>Hahahahahah</h2>
  <h2>Hahahahahah</h2> 
 <h2>Hahahahahah</h2>
  <h2>Hahahahahah</h2>
  <h2>Hahahahahah</h2>
</div>
<div class="marqueeContainer">
  <div class="marqueeText">
    <h1>Endrit</h1>
    <h1>As</h1>
  </div>
  <div class="marqueeText">
    <h1>Artan</h1>
  </div>
  
  
</div>

.marqueeContainer{
  display:inline-flex;
  width:100%;
  overflow:hidden;
}

.marqueeText{
  min-width:100%;
  display:inline-flex;
}

.marqueeText *{
  margin:0 1rem;
}

const marqueeContainer=document.querySelectorAll(".marqueeContainer");
const marqueeText=document.querySelectorAll(".marqueeText");

document.addEventListener('scroll',()=>{

marqueeContainer.forEach((item)=>{
  
  
              window.requestAnimationFrame(() => {

  
  function animate(itm,calcSpeed){
                    itm.style.transform = `translateX(${calcSpeed}px)`;

  }
  let itemsrc=item.getBoundingClientRect().y;
                console.log(itemsrc)
  marqueeText.forEach((itms)=>{
      animate(itms,itemsrc)

  })
  
})
})
  
})

The functionality is there, I mean when I scroll with mouse the text moves but if I want to reload the page and I am in certain position on the page if then I scroll the text jumps a lot, giving a bad effect.“