Breaking News: Grepper is joining You.com. Read the official announcement!

Fixed navbar in react

Add Answer

S. SHATAB answered on January 16, 2022 Popularity 4/10 Helpfulness 1/10

answer Fixed navbar in react

related fixed menu reactjs

related Fixed navbar in react

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

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

Closely Related Answers

fixed menu reactjs

Comment

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

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

Comment

Sticky Navbar

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: fixed fixe

Link to this answer
Share Copy Link

Contributed on Jun 27 2022

Erhahon imafidon

0 Answers Avg Quality 2/10

Fixed navbar in react

Contents

More Related Answers

Fixed navbar in react

Closely Related Answers

fixed menu reactjs

Fixed navbar in react

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

Grepper

Documentation

Social

Legal

Contact

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