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

-1 vote345 views5 answers
Context Api in react
Javascript React
64 votes332 views6 answers
React js router
Javascript React
0 vote313 views1 answer
React js set default route
Javascript React
32 votes338 views2 answers
How to routing in react js
Javascript React
0 vote371 views1 answer
Discord.js TypeError: Reactedmsg.delete message using id
Javascript React
7 votes317 views1 answer
React native hide scroll indicator
Javascript React
19 votes317 views6 answers
React native build android apk
Javascript React
1 vote381 views3 answers
React native port
Javascript React
0 vote301 views2 answers
Error: Error: Unable to resolve module react-native-gesture-handler
Javascript React
0 vote324 views1 answer
Csv upload with react
Javascript React