On scroll to the page add class to the header menu in react

Question

I am using react.js. What I am doing is when the user scrolls the page then I have to add the class to the header menu. I tried below code but it's not working.

I create a file in the public folder and added below the script in the index.html

 <script src="%PUBLIC_URL%/custom.js"></script>

custom.js

const header = document.getElementById("header_menu");

const sectionOneOptions = {
  rootMargin: "-200px 0px 0px 0px"
};

const sectionOneObserver = new IntersectionObserver(function(
  entries,
  sectionOneObserver
) {
  entries.forEach(entry => {
    if (!entry.isIntersecting) {
      header.classList.add("menuscroll");
    } else {
      header.classList.remove("menuscroll");
    }
  });
},
sectionOneOptions);

Header.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Link} from 'react-router-dom';

const HeaderMenu = () => {
    return (
        <header id="header_menu">
        <div className="right-menu float-right">
            <ul>
                <li><Link to={'/'} >Home</Link></li>
                <li><Link to={'/about'} >About Us</Link></li>
                <li><Link to={'/contact'} >Contact Us</Link></li>
            </ul>
        </div>
        </header>
        );
  }

  export default HeaderMenu;

on what condition do you want to remove the class `menuscroll`? — rotimi-best, May 03 '20 at 13:52
@rotimi-best, When the user scrolls 100 px then I have to add the class to the menu also I want to remove the same class if reach at top — user9437856, May 03 '20 at 13:55

rotimi-best · Accepted Answer · 2020-05-03T16:47:35.723

2

One important thing to say is that when using react try your best not to manipulate the DOM yourself, that should be react's job.

In useEffect, we listen for the scroll event and then call a function. In that function I am checking if the classname has already been set, if it has then we don't want to update the state to avoid infinity loop, I also check if it the pageYOffset greater than or equal to 100px. I do vice versa to remove the classname when we get less than 100px

import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';

const HeaderMenu = () => {
    const [headerClassName, setHeaderClassName] = useState('');

    const handleScroll = (headerClassName) => {
        if (headerClassName !== 'menuscroll' && window.pageYOffset >= 100) {
            setHeaderClassName('menuscroll');
        } else if (headerClassName === 'menuscroll' && window.pageYOffset < 100) {
            setHeaderClassName('');
        }
    }

    React.useEffect(() => {
        window.onscroll = () => handleScroll(headerClassName);
    }, [headerClassName]); // IMPORTANT, This will cause react to update depending on change of this value

    return (
        <header id="header_menu" className={headerClassName}>
            <div className="right-menu float-right">
                <ul>
                    <li><Link to={'/'} >Home</Link></li>
                    <li><Link to={'/about'} >About Us</Link></li>
                    <li><Link to={'/contact'} >Contact Us</Link></li>
                </ul>
            </div>
        </header>
    );
}

export default HeaderMenu;

You can also test on codepen

edited May 03 '20 at 16:47

answered May 03 '20 at 13:55

rotimi-best

1,852
18
29

I am learning the reach. So whatever i undersood from youtube I uploaded here. – user9437856 May 03 '20 at 13:57
Give me sometime to understand your answer – user9437856 May 03 '20 at 13:57
Class is added when scroll to bottom but when I go up the still showing class. – user9437856 May 03 '20 at 14:17
pls try again, the state value wasn't being updated in the `window.scroll` callback – rotimi-best May 03 '20 at 14:42
Yes, I try again but still showing the menuscroll when reach at top. – user9437856 May 03 '20 at 14:53
check the codepen I added to my answer, it removes the classname when it get to the top – rotimi-best May 03 '20 at 14:54
Please check my code here https://codesandbox.io/s/happy-almeida-t6q7w?file=/src/components/Header.js – user9437856 May 03 '20 at 15:09
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/213025/discussion-between-rotimi-best-and-user9437856). – rotimi-best May 03 '20 at 15:30
I have fixed it, what was missing was the array dependency in `useEffect`. Please take a look at my code now – rotimi-best May 03 '20 at 16:48
Take a look at this codepen to test it out https://codesandbox.io/s/inspiring-keller-nyt10?file=/src/components/Header.js:552-587 – rotimi-best May 03 '20 at 16:48
Can you help me out in this issue https://stackoverflow.com/questions/61624576/how-to-display-the-menu-list-when-clicking-on-the-hamburger-icon-in-react – user9437856 May 06 '20 at 17:46
Yes sure, I am looking at it – rotimi-best May 06 '20 at 18:04

On scroll to the page add class to the header menu in react

1 Answers1