Fixed menu reactjs

import { useEffect, useState } from "react";

    const NavBar = () => {
    // sticky nav
    const [stickyClass, setStickyClass] = useState("");

    function stickNavbar() {
        let windowHeight = window.scrollY;
        setStickyClass("sticky-nav") ? windowHeight > 500 : setStickyClass("");
    }

    useEffect(() => {
        window.addEventListener("scroll", stickNavbar);
    }, []);

return (
        <nav className="relative w-full p-4">
            <div className={`flex w-full flex-row items-center justify-between ${stickyClass}`}>
             navbar content goes here ....
            <div/>
<nav/>

Source: stackoverflow.com

Similar codes

0 vote299 views1 answer
React live chat widget
Javascript React
-2 votes301 views2 answers
React native margin
Javascript React
73 votes291 views7 answers
React icons
Javascript React
2 votes301 views1 answer
React function being called every minute
Javascript React
0 vote286 views1 answer
Navigate to another page onPress button react native
Javascript React
0 vote311 views1 answer
React regions
Javascript React
0 vote299 views1 answer
React set state before render
Javascript React
0 vote315 views1 answer
React datetime mannual editing
Javascript React
5 votes249 views1 answer
Add icon material ui
Javascript React
0 vote304 views2 answers
Mobile nav react npm
Javascript React