Simple Dynamic Nav bar based on scroll position (React).

I was trying to create a nav bar with a transparency that would become solid based on scroll position. For some reason I struggled trying to figure this out in React opposed to creating in vanilla javascript.

Using the useState and useEffect hooks, I was able to come up with something that works with a function component.

Image for post
Image for post
Now you see me, now you don’t

First, since I’m using a function component and not a class component, we need to import useState and useEffect hooks.

import { useState, useEffect } from "react"

We need state so we can compare where the scroll position is.

const [pos, setPos] = useState("top")

Next, we use the useEffect hook as a component did update lifecycle method.

useEffect (()=>{
document.addEventListener("scroll", e => {
let scrolled = document.scrollingElement.scrollTop;
if (scrolled >= 5){
setPos("moved")
} else {
setPos("top")
}
})
},[])

Within the useEffect function, we have an addEventListener that will check for a scroll event.

Next, we create a variable that checks the documents scroll position.

Then if the scrolled position is greater than 5 (or what ever you want) it will update state to “moved”.

The else portion of the if statement is for when the user scrolls back to the top of the page.

Putting it together

So now we a tracking the scroll position, we can do some conditional rendering.

<div className="nav" style={{backgroundColor: pos === "top" ? "rgba(0, 0, 0, 0)" : "rgba(0, 0, 0, .5)" }}>
// stuff inside the nav div
</div>

If the pos state value is “top”, the nav bar background will be transparent. If the pos state is not top, then you can set it to what ever rgba value you want.

Thats basically it. Hope this helps anyone trying to figure out how to accomplish this the “React” way.

Fullstack Software Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store