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

如何解决标题背景图像在 React 应用程序中以底部渐变滚动时消失并逐渐消失

我的标题图片正在消失（滚动时消失）。我在我的 React 应用中用 javascript 实现了这个：

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);
  },[]);

这有效。我唯一的问题是我需要一个渐变 <div className="gradient" />，它使用 position: absolute; 和 bottom: 0; 定位在背景图像上。但是现在滚动时渐变没有移动？也只有图像应该淡出，而不是渐变。

这是一个 code sandbox，我目前所拥有的工作示例。

我如何让它发挥作用？

也许还有更简单的 css 方法来实现相同的目标？

解决方法

这是我针对您的问题提出的解决方案，如果这就是您要找的，请告诉我。 因此，您似乎希望渐变在 heroWrapper 移动的同时移动，对吗？

我的建议是删除 <div className="gradient" /> 并在您的 CSS 上执行此操作

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