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 vote236 views1 answer
No known class method for selector 'setScreenName:screenClass: react native
Javascript React
1 vote222 views4 answers
React native push notifications npm
Javascript React
42 votes224 views3 answers
React onchange multiple functions
Javascript React
2 votes220 views2 answers
React aws s3 npm
Javascript React
0 vote205 views1 answer
ReactNative onPress doesn't exist
Javascript React
2 votes198 views1 answer
Audio react
Javascript React
0 vote228 views6 answers
State functions of react cheatsheet
Javascript React
5 votes233 views2 answers
What hostings can run react js
Javascript React
1 vote233 views1 answer
React vscode stop auto close tag
Javascript React
6 votes240 views1 answer
React history with search
Javascript React