How can I keep the character on the screen when I scroll and still have it move along the path?

This is the second time I’m posting this. My previous post was closed without resolving my issue.

This is my question.

Please help me calculate the scrollProgress so that my pathIcon always stays within the screen when scrolling. Or if you have any other ideas, please let me know.

Here is my code :

  pathIcon.style.offsetPath = `path('${Path_440.getAttribute("d")}')`;
      const pathLength = Path_440.getTotalLength();

      function clamp(min, val, max) {
        return Math.min(Math.max(min, val), max);
      }

      function updatePath() {
        const docElt = document.documentElement;
        const pathBox = theFill.getBoundingClientRect();

        // calculates scroll progress based on viewport progress
        const scrollProgress = clamp(
          0,
          -pathBox.y / (pathBox.height - docElt.clientHeight),
          1
        );

        pathIcon.style.offsetDistance = `${scrollProgress * 100}%`;

        // These lines fill in the dashes as you scroll down.
        const drawLength = pathLength * scrollProgress;
        const rest = pathLength - drawLength;
        theFill.style.strokeDasharray = `${drawLength}px ${rest}px`;
      }

      updatePath();
      window.addEventListener("scroll", () => updatePath());

 body {
        height: 500vh;
        background: #f1f1f1;
      }
      .container {
        display: flex;
        justify-content: center;
      }
      #pathIcon {
        position: absolute;
        inset: 0;
        width: 100px;
        height: 100px;
        offset-rotate: 0rad;
      }
      .middlePath {
        position: absolute;
      }
      .crossLine {
        position: absolute;
      }

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <div style="height: 175px"></div>
    <div class="container">
      <div style="position: relative">
        <img
          class="crossLine"
          src="/public/pngegg.png"
          width="580"
          height="1500"
          alt=""
        />
        <svg
          width="540"
          height="2990"
          viewBox="0 0 540 2990"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          class="middlePath"
        >
          <defs>
            <path
              id="Path_440"
              d="M253.744 2C253.744 2 8.36236 68.4995 17.2435 261C26.1246 453.5 380.243 311.5 380.243 531C380.243 750.5 15.2436 631.5 2.24357 826C-10.7564 1020.5 500.798 1091 535.244 1258.5C569.689 1426 296.243 1473 279.744 1460.5"
              stroke="#F39029"
              stroke-width="4"
            />
          </defs>
          <use href="#Path_440" stroke-dasharray="20 10" />
          <use id="theFill" href="#Path_440" />
        </svg>
        <svg
          id="pathIcon"
          viewBox="0 0 100 191"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <rect width="100" height="191" fill="url(#pattern0)" />
          <defs>
            <pattern
              id="pattern0"
              patternContentUnits="objectBoundingBox"
              width="1"
              height="1"
            >
              <use
                xlink:href="#image0_126_965"
                transform="matrix(0.00376726 0 0 0.00197239 -0.00104536 0)"
              />
            </pattern>
            <image
              id="image0_126_965"
              width="266"
              height="507"
              xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUh"
            />
          </defs>
        </svg>
      </div>
    </div>
  </body>
</html>

It looks fine at first glance, but when I scroll, the pathIcon moves too fast and sometimes goes off-screen. I want it to slow down or stay fixed in the middle of the screen but still move to the path. This would make it smoother and give a better overview of the path.

Here is the current state and my desired outcome.
Please help me. Thank you for all your responses

I’ve tried the method mentioned above, but it still doesn’t keep the pathIcon within the screen when scrolling. The pathIcon moves too fast and goes off-screen.