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/>

Popularity 9/10 Helpfulness 5/10 Language javascript

Source: stackoverflow.com

Tags: fixed fixe

Link to this answer
Share Copy Link

Contributed on Jan 16 2022

Akmal

0 Answers Avg Quality 2/10

Fixed navbar in react

Comment

import React, { useState, useEffect } from 'react';

export default function Navbar() {
  const [stickyClass, setStickyClass] = useState('relative');

  useEffect(() => {
    window.addEventListener('scroll', stickNavbar);

    return () => {
      window.removeEventListener('scroll', stickNavbar);
    };
  }, []);

  const stickNavbar = () => {
    if (window !== undefined) {
      let windowHeight = window.scrollY;
      windowHeight > 500 ? setStickyClass('fixed top-0 left-0 z-50') : setStickyClass('relative');
    }
  };

  return <div className={`h-16 w-full bg-gray-200 ${stickyClass}`}>Navbar</div>;
}

Popularity 3/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: fixed javascript navbar

Link to this answer
Share Copy Link

Contributed on Oct 12 2023

S. SHATAB

0 Answers Avg Quality 2/10

Fixed navbar in react

Comment

import React, { useEffect, useState, useRef } from "react";

// Import the stylesheets
import styles from 'navbar.module.css'


const StickyNavbar = () => {
  // All states
  const [sticky, setSticky] = useState(false);
  const [navHeight, setNavHeight] = useState(0);

  // All refs
  const navbar = useRef();
  const navbarOffset = useRef();

  // Mount the Event Listener on loading the site
  useEffect(() => {
    const handleScroll = () => {

      // Get the offset to the top
      const value = navbarOffset.current.clientHeight;

      // Set the boolean value 
      setSticky(window.pageYOffset >= value);
    }
  
    window.addEventListener('scroll', handleScroll);

    // Set the height of the Navbar
    setNavHeight(navbar.current.clientHeight);

    // Remove the listener when cleaning up
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

 
  return (
    <>
      <div ref={navbarOffset}>This is the element before!</div>
      {/* Always add the content class and only if it is sticky the other class */}
      <div ref={navbar} className={`${styles.content} ${sticky && styles.sticky}`}>
        I'm the content of the Navbar
      </div>
      {/* To prevent the next content to "jump" behind the navbar */}
      <div style={sticky ? ({ marginTop: navHeight }) : ({})}></div>
    </>
  )
}

export default StickyNavbar;

Popularity 3/10 Helpfulness 1/10 Language whatever

Source: stackoverflow.com

Tags: fixed navbar whatever

Link to this answer
Share Copy Link

Contributed on Oct 12 2023

S. SHATAB

0 Answers Avg Quality 2/10

how to properly make the navbar to be fixed to the top in react.jsx

Contents

More Related Answers

how to properly make the navbar to be fixed to the top in react.jsx

Closely Related Answers

fixed menu reactjs

Fixed navbar in react

Fixed navbar in react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.