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 vote129 views1 answer
React google login button size increase
Javascript React
0 vote94 views2 answers
A function whose declared type is neither 'void' nor 'any' must return a value.
Javascript React
0 vote155 views1 answer
Can i use hooks with expo in react native
Javascript React
0 vote148 views4 answers
Router react how to pass data to class component
Javascript React
13 votes145 views4 answers
Passing data in react router history,push
Javascript React
2 votes88 views1 answer
Range slider mui can't slide
Javascript React
0 vote149 views1 answer
React bootstrap make col disapear in small screens
Javascript React
0 vote146 views1 answer
How to rerender a page in React when the user clicks the back button
Javascript React
1 vote136 views1 answer
Div onchange react
Javascript React
0 vote137 views1 answer
How to have hotjar in react-hotjar
Javascript React