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 vote366 views1 answer
React check if localhost
Javascript React
1 vote395 views1 answer
Rendering, reconciliation, committing in react
Javascript React
10 votes345 views3 answers
Install firebase react
Javascript React
0 vote379 views1 answer
React google login button size increase
Javascript React
0 vote378 views1 answer
Add image to ag-grid with react
Javascript React
1 vote402 views1 answer
React native object is empty
Javascript React
0 vote408 views1 answer
React modal scroll 2 overlapping components
Javascript React
10 votes336 views1 answer
That is neither a react function component nor a custom react hook function. react component names must start with an uppercase letter. react hook names must start with the word "use"
Javascript React
0 vote373 views1 answer
React native expo release apk
Javascript React
1 vote398 views1 answer
"react native" component dynamic children props
Javascript React