Simple Scrolled Effect on React Project

  

  const [scrolled, setScrolled] = useState(false);

 

// Handle scroll event to add background and shadow when scrolled

  useEffect(() => {

    const handleScroll = () => {

      if (window.scrollY > 50) {

        setScrolled(true);

      } else {

        setScrolled(false);

      }

    };

    window.addEventListener("scroll", handleScroll);

    // Clean up event listener on component unmount

    return () => {

      window.removeEventListener("scroll", handleScroll);

    };

  }, []);   

    // Dynamic tailwind css     <div

        className={`w-full hidden md:block fixed top-0 left-0 z-50 px-5 py-2

          transition-all duration-500 ease-in-out ${

          scrolled ? "bg-white shadow-md" : "bg-transparent text-white"

        }`}

        style={{

          transition: "background-color 0.5s ease, box-shadow 0.5s ease",

          // Adding transition to background color and shadow

        }}

   >......</div>