如何为元素在滚动时沿SVG路径移动的位置错误

Question

我找不到沿路径错误定位元素的解决方案。当我刷新页面并且不在页面顶部时，会出现问题。当我们在页面顶部时（在路径的开头），元素位置确定。但是当我滚动一点然后刷新页面时，该元素的位置不正确。

我试图设置元素（圆形）定位的超时时间。

这是我的情况：https://codepen.io/Pysilla/pen/PgPeOB

我基于此密码笔代码https://codepen.io/doubtingreality/pen/Vdmgrm的代码。 为此，我感到非常感谢。

JS code I used
const path = document.querySelector('.path');
const circle = document.querySelector('.circle');

let pathPosition = path.getBoundingClientRect();
let documentPosition = document.body.getBoundingClientRect();
const pathTotalLength = path.getTotalLength();

function positionElements() {
    // SVG passes center of screen
    const relativePageOffset = -pathPosition.top +
    (window.pageYOffset + window.innerHeight * .94);


    const pointPercentage = relativePageOffset / pathPosition.height;
    const pointOnPath = pointPercentage * pathTotalLength;
    const pathPoint = path.getPointAtLength(pointOnPath);

    circle.style.transform = `translate(
    ${ pathPosition.left + pathPoint.x }px,
    ${ pathPosition.top + pathPoint.y }px
    )`;
  }

  positionElements();

  window.addEventListener('scroll', () => {
    positionElements();
  })

  window.addEventListener('resize', () => {
    pathPosition = path.getBoundingClientRect();
    documentPosition = document.body.getBoundingClientRect();

    positionElements();
  });

我希望沿路径定位圆，但是现在它似乎位于路径宽度的左侧或右侧。