При прокрутке страницы добавьте класс в верхнее меню в реаги

Question

Я использую реагирую. js. Что я делаю, когда пользователь прокручивает страницу, тогда я должен добавить класс в меню заголовка. Я попробовал приведенный ниже код, но он не работает.

Я создаю файл в папке publi c и добавляю ниже индекса в индекс. 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);

Заголовок. 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;

Answer 1

Одна важная вещь, которую стоит сказать, это то, что при использовании реакции старайтесь изо всех сил не манипулировать DOM самостоятельно, это должно быть работой реагирования.

В useEffect мы прослушиваем событие прокрутки и затем вызываем функцию. В этой функции я проверяю, было ли уже задано имя класса, если это так, мы не хотим обновлять состояние, чтобы избежать бесконечности l oop, я также проверяю, является ли оно pageYOffset больше или равно 100px. Я делаю наоборот, чтобы удалить имя класса, когда мы получаем меньше 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;

Вы также можете проверить на codepen