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

Question

My header image is disappearing (fading away when scrolling). I achieved this wit javascript in my React app:

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

This works. The only problem I have is that I need a gradient <div className="gradient" /> which is positioned over the background image with position: absolute; and bottom: 0;. But now the gradient is not moving when scrolling? Also only the image should fade-out, not the gradient.

Here is a code sandbox, working example what I have so far.

How do I get this to work?

Also maybe there as more simple css approach to achieve the same goal?

Answer 1

Here's my proposed solution for your issue, let me know if this is what you're looking for. So, it seems like you want your gradient to move at the same time that your heroWrapper is moving, correct?

My suggestion would be to remove <div className="gradient" /> and instead do this on your 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%
  );
}