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

4 votes110 views1 answer
Error Invalid regular expression: /(.*\\__fixtures__\\.*|node_modules[\\\]react[\\\]dist[\\\].*|website\\node_modules\\.*|heapCapture\\bundle\.js|.*\\__tests__\\.*)$/: Unterminated character class.
Javascript React
15 votes143 views6 answers
Form in react
Javascript React
2 votes160 views1 answer
Get current screen name react navigation
Javascript React
0 vote113 views1 answer
Connect react native app to local api macos
Javascript React
0 vote114 views1 answer
React should write method in a functional component or outside functional component
Javascript React
0 vote107 views1 answer
Get call log in react native with filter android
Javascript React
0 vote112 views1 answer
Use of parse in react
Javascript React
0 vote101 views1 answer
React native regenerate android and ios folders
Javascript React
0 vote125 views1 answer
Decet wheter react app in development or production
Javascript React
0 vote102 views1 answer
How to redirect a form to another page when we submitted a form in react js
Javascript React