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 vote299 views1 answer
What is the use of consrtructors in reactjs
Javascript React
3 votes351 views3 answers
How to update react app
Javascript React
0 vote307 views1 answer
React rative release
Javascript React
0 vote320 views1 answer
Filter based on input typing react
Javascript React
0 vote272 views1 answer
Type '{ GlobalState: any; Dispatch: React.Dispatch<any>; }' is not assignable to type 'null'
Javascript React
24 votes278 views5 answers
React map array
Javascript React
1 vote334 views1 answer
Java.lang.outofmemoryerror (no error message) react native
Javascript React
7 votes305 views3 answers
React route props
Javascript React
0 vote299 views2 answers
Run build version react
Javascript React
0 vote305 views1 answer
React props change
Javascript React