这可能对你有用。我建议在一个单独的文件中测试它，或者在JsFiddle上测试。我还建议你在各种分辨率下测试它，只是为了看看它是如何工作的。
提供的解决方案/建议使用检查DOM中元素可见性的修改版本，涉及滚动和元素位置，如this SO answer所示。

var scroll = document.querySelector ('.curve');
var factor = scroll.getBoundingClientRect().top;
var value = 1;

window.addEventListener ('scroll', whiteCurve);

function whiteCurve() {
  let scrollProperties = isScrolledIntoView(scroll);

  if(scrollProperties["visible"]) {
    value =  1 - window.scrollY  / factor;

    if(value < 0) {
      value = 0;
    }

    scroll.style.transform = `scaleY(${value})`;
  } else {
    // console.log('no');
  }
}

function isScrolledIntoView(el) {
  let rect = el.getBoundingClientRect();
  let elemTop = rect.top;
  let elemBottom = rect.bottom;

  // Only completely visible elements return true:
  //let isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
  // Partially visible elements return true:
  let isVisible = elemTop < window.innerHeight && elemBottom >= 0;
  return {
    "visible" : isVisible,
    "top" : elemTop,
    "bottom" : elemBottom
  };
}

* {
  margin:0;
  padding:0;
}
body {
  height:200vh;
  background-color: #111;
}
section {
  position:absolute;
  width:100%;
  height:100%;
  background:#ff2;
}
section .curve {
  position:absolute;
  bottom:-200px;
  height:200px;
  width:100%;
  transform-origin:top;
}
section .curve img{
  width:100%;
  height:100%;
}

<section>
  <span class="curve">
    <img src="https://wordpress-899937-3173615.cloudwaysapps.com/wp-content/uploads/2023/01/curve-white-300x59.png">
  </span>
</section>

在你原来的WordPress链接中，源代码包含一个固定值-750作为除数（您最初的尝试使用-200）。不使用固定的数值，此修订建议使用curve元素与页面顶部的初始距离（getBoundingClientRecT().top）。一旦curve元素变为部分可见，该属性就开始起作用（不像之前的建议，使用了一个元素的完全可见性）-随着scrollY的增加，比例因子减少，一旦你到达顶部，scaleY将变为零，从而获得所需的效果。