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 vote239 views1 answer
React handling event
Javascript React
0 vote267 views1 answer
`ForwardRef(ListboxComponent)`, expected a ReactNode. at ListboxComponent
Javascript React
0 vote259 views1 answer
Npx code for src folder in react js
Javascript React
22 votes263 views4 answers
Copy text to clipboard reactjs
Javascript React
0 vote289 views1 answer
React native run on specific emulator
Javascript React
4 votes258 views2 answers
Import reactdom
Javascript React
1 vote261 views1 answer
React native grid view
Javascript React
0 vote225 views2 answers
Datepicker react native
Javascript React
0 vote260 views1 answer
React index.js file
Javascript React
0 vote270 views2 answers
Module not found: Error: Can't resolve 'crypto' react
Javascript React