// components/Navigation.js import { useEffect, useState } from "react"; export default function Navigation() { const [clientWindowHeight, setClientWindowHeight] = useState(""); const [backgroundTransparacy, setBackgroundTransparacy] = useState(0); const [padding, setPadding] = useState(30); const [boxShadow, setBoxShadow] = useState(0); useEffect(() => { window.addEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll); }); const handleScroll = () => { setClientWindowHeight(window.scrollY); }; useEffect(() => { let backgroundTransparacyVar = clientWindowHeight / 600; if (backgroundTransparacyVar < 1) { let paddingVar = 30 - backgroundTransparacyVar * 20; let boxShadowVar = backgroundTransparacyVar * 0.1; setBackgroundTransparacy(backgroundTransparacyVar); setPadding(paddingVar); setBoxShadow(boxShadowVar); } }, [clientWindowHeight]); return ( <nav class="navbar navbar-expand-lg navbar-light fixed-top" style={{ background: `rgba(255, 255, 255, ${backgroundTransparacy})`, padding: `${padding}px 0px`, boxShadow: `rgb(0 0 0 / ${boxShadow}) 0px 0px 20px 6px`, }} > <div className="container"> <a class="navbar-brand" href="#"> Techomoro </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation" > <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarText"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#"> Home </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> About </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> Contact </a> </li> </ul> </div> </div> </nav> ); }
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