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 vote133 views1 answer
How to install yup in react native
Javascript React
142 votes200 views3 answers
Install react app
Javascript React
0 vote164 views1 answer
Missing script: "start" react
Javascript React
18 votes126 views3 answers
React detect enter key
Javascript React
0 vote129 views1 answer
Reactnaviataion change title
Javascript React
8 votes126 views2 answers
React set title of page
Javascript React
0 vote174 views1 answer
React implicit return
Javascript React
0 vote150 views1 answer
React Fractional rating
Javascript React
0 vote123 views1 answer
How to pass an id to the route of a seprate file react
Javascript React
0 vote121 views1 answer
React Spread Attributes conditionally
Javascript React