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

Now you see me, now you don’t
import { useState, useEffect } from "react"
const [pos, setPos] = useState("top")// giving the default value of "top". I could have probably have used a boolean instead....
useEffect (()=>{
document.addEventListener("scroll", e => {
let scrolled = document.scrollingElement.scrollTop;
if (scrolled >= 5){
setPos("moved")
} else {
setPos("top")
}
})
},[])

Putting it together

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

--

--

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