const [animateHeader, setAnimateHeader] = useState(false) useEffect(() => { const listener = () => window.scrollY > 140 ? setAnimateHeader(true) : setAnimateHeader(false) window.addEventListener('scroll', listener) return () => { window.removeEventListener('scroll', listener) } }, []) // Example usage with TailwindCSS: <div className={`bg-header/75 transition duration-500 ease-in-out ${animateHeader && 'bg-header/[0.95]'}`}>...</div>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter