agrosetr.blogg.se

}, ) Use these values to style the Navbar SetBackgroundTransparacy(backgroundTransparacyVar)

Let boxShadowVar = backgroundTransparacyVar * 0.1 Let paddingVar = 30 - backgroundTransparacyVar * 20 Let backgroundTransparacyVar = clientWindowHeight / 600 const = useState(0) Ĭonst = useState(30) Ĭonst = useState(0) Here, the change in padding will affect the Navbar height. We need to recalculate these values with any change in the clientWindowHeight state. Now using the clientWindowHeight value to calculate background transparency, padding, box-shadow and set these values to state backgroundTransparacy, padding, boxShadow respectively. }) Calculate background transparency, padding and box-shadow Return () => window.removeEventListener("scroll", handleScroll) Window.addEventListener("scroll", handleScroll) So listen for the mouse scroll and store the window height in a state clientWindowHeight. Because Next.js applications are rendered on the server and so that it will not get the window property of the client.īut we can get access to the window property inside the useEffect hook.

One thing we need to note when developing an application using Next.js is that it can not access window property directly. Listen for the scroll event and calculate the window height Here I am storing it in the Navigation.js component. Because we usually keep the Navbar in a separate component. So let us start coding the Navigation component. Change Navbar Style With Scroll in a Next.js Website