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

14 votes353 views2 answers
Photo in React native
Javascript React
0 vote372 views3 answers
Line 32:18: 'Link' is not defined react/jsx-no-undef
Javascript React
0 vote364 views1 answer
React-native-cli remove
Javascript React
5 votes372 views1 answer
How to create component in reactjs
Javascript React
0 vote359 views1 answer
Restful react npm
Javascript React
0 vote414 views1 answer
Uuid react native expo
Javascript React
0 vote325 views1 answer
Nextjs react native web typescript
Javascript React
0 vote366 views1 answer
Find in array and return true or false react js
Javascript React
0 vote350 views1 answer
React hooks link to external site new tab
Javascript React
0 vote409 views1 answer
Filter based on input typing react
Javascript React