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 vote327 views1 answer
Install react hotjar
Javascript React
1 vote358 views2 answers
[HomePage] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
Javascript React
2 votes312 views2 answers
Export aab bundle react native android
Javascript React
1 vote305 views1 answer
What is react reveal
Javascript React
0 vote317 views1 answer
Remarkable react js
Javascript React
1 vote314 views1 answer
Failed to transform react-native-reanimated-65.aar
Javascript React
0 vote311 views1 answer
Svg as a component react
Javascript React
4 votes304 views3 answers
Image react native base64
Javascript React
7 votes328 views4 answers
Get parameter from url reactjs
Javascript React
0 vote338 views1 answer
React native make safe view in mobile
Javascript React