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

15 votes181 views2 answers
Link reload page react
Javascript React
3 votes167 views1 answer
UseHistory is not exported form react-router-dom
Javascript React
3 votes218 views2 answers
Use onchange with react select
Javascript React
1 vote206 views1 answer
Create functional component react
Javascript React
1 vote187 views1 answer
How to define state in react function
Javascript React
0 vote196 views1 answer
Radio button in react native expo
Javascript React
24 votes178 views6 answers
React map
Javascript React
24 votes221 views6 answers
Proptypes react
Javascript React
2 votes186 views2 answers
React native scrollview detect end
Javascript React
29 votes200 views6 answers
React background image
Javascript React