Header 在 React 应用程序中使用底部渐变滚动时背景图像消失并淡出

Question

我的 header 图片正在消失（滚动时逐渐消失）。我在我的 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;。但是现在滚动时渐变没有移动？同样只有图像应该 fade-out，而不是渐变。

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

如何让它工作？

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

Answer 1

这是我针对您的问题提出的解决方案，如果这正是您要找的，请告诉我。所以，您似乎希望渐变在 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%,
    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%
  );
}

Header 在 React 应用程序中使用底部渐变滚动时背景图像消失并淡出

Header background image disappear and fade away on scroll with bottom gradient in React app

javascript

css

parallax

reactjs