Javascript 标题背景图像消失，并在React应用程序中以底部渐变滚动消失

我的标题图像正在消失（滚动时消失）。我在React应用程序中实现了以下目标：

useEffect(() => {
    const handleScroll = () => {
      if (parallaxDiv.current) {
        parallaxDiv.current.style.backgroundPositionY = `${
          window.pageYOffset * -0.4
        }px`;
        parallaxDiv.current.style.opacity = `${1 - +window.pageYOffset / 550}`;
        parallaxDiv.current.style.top = `${+window.pageYOffset}px`;
      }
    };

    window.addEventListener("scroll", handleScroll);

    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

这很有效。我唯一的问题是，我需要一个梯度

，它位于背景图像上方，位置为

绝对和
底部：0。但是现在滚动时梯度没有移动？而且只有图像应该淡出，而不是渐变

这是一个我到目前为止的工作示例

我怎样才能让它工作

也可能有更简单的css方法来实现相同的目标？
这是我针对您的问题提出的解决方案，如果这是您想要的，请告诉我。
所以，看起来你想让你的梯度在你的
heroWrapper
移动的同时移动，对吗

我的建议是删除
，而是在CSS上执行此操作

.heroWrapper:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 29, 38, 0) 0%,
    rgba(20, 29, 38, 0.02) 0.86%,
    rgba(20, 29, 38, 0.05) 3.34%,
    rgba(20, 29, 38, 0.12) 7.26%,
    rgba(20, 29, 38, 0.2) 12.48%,
    rgba(20, 29, 38, 0.29) 18.82%,
    rgba(20, 29, 38, 0.39) 26.13%,
    rgba(20, 29, 38, 0.5) 35.25%,
    rgba(20, 29, 38, 0.61) 43.01%,
    rgba(20, 29, 38, 0.71) 52.25%,
    rgba(20, 29, 38, 0.8) 61.81%,
    rgba(20, 29, 38, 0.88) 71.52%,
    rgba(20, 29, 38, 0.95) 81.24%,
    rgba(20, 29, 38, 0.98) 90.78%,
    #141d26 100%
  );
}

是否还有一种更为css的方法，而不是像我现在这样使用javascript？有一些css视差效果还是什么？由于另一个软件包，我无法使用
背景位置：已修复。