相反，计算y增量，并在定时值（即：0.Ns，并将x坐标转换为增量值乘以100，以获得百分比值。

const elBox = document.querySelector(".image-on-text-container");

const moveImage = () => {
  const rect = elBox.getBoundingClientRect();
  const yDelta = -rect.top / rect.height;
  const x = Math.max(0, yDelta); // prevent negative value (move only to left)
  elBox.style.translate = `${x * 100}% 0`;
};

addEventListener("scroll", moveImage); // Do on scroll
moveImage(); // and on init

* { margin: 0; box-sizing: border-box; }

.site-header {
  overflow: hidden; /* Remove scrollbars */
}

.image-on-text-container {
  position: relative;
  height: 100vh;
  background-image: url("https://images.pexels.com/photos/2159065/pexels-photo-2159065.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200");
  background-repeat: no-repeat;
  background-size: cover;
  transition: 0.2s ease-out;
}

<div class="container-fluid site-header" id="main-image">
  <div class="image-on-text-container bg-secondary">
    <span class="site-brand"></span>
  </div>
</div>

<p style="height: 100vh;">Scroll back up.....</p>

通过元素的位置值（例如左）来动画元素有其缺点，并且不能像平移那样平滑地渲染，因为它不能纯粹由gpu计算。请参阅更详细的解释here。
下面是一个transform的例子：translatex（）设置为全局CSS变量。

const styleRoot = document.querySelector(':root');
const windowWidth = window.innerWidth;
const scrollHeight = document.body.scrollHeight;
let lastScrollTop = 0;
const factor = 1;

// Sets a global css Variable var(--boxTranslate)
function setTranslate(xValue) {
 styleRoot.style.setProperty('--boxTranslate', `translateX(-${xValue * factor}px)`);
}

// Checks if element is on screen
function isVisible(element) {
  const rect = element.getBoundingClientRect();
  const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
  return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}

function onScroll(scrollEvent) {
  const box = document.getElementById('box')
  
  if (!box) {
    return
  } else if (!isVisible(box)) {
    box.remove();
  }
  
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  if (scrollTop > lastScrollTop) {
    // Scrolling down
    setTranslate(scrollTop)
  }
}

window.onscroll = onScroll;

body {
  min-height: 5000px;
  overflow-x: hidden;
}

#box {
  height: 500px;
  width: 500px;
  background-color: teal;
  transition: all 125ms ease-out;
  transform: var(--boxTranslate);
}

<div id="box">
  I go left as you scroll and get removed when I'm out of sight
</div>

更改这两个块：

#main-image {
        position: marker;
        left: 0;
        transition: all ease-out 3s;
     }

还有这个

window.onscroll = function () {
        var box = document.getElementById("main-image")
        if (x == 0) {
           x = screenWidth
           box.style.left = x + "px"
        }
     }