Реагирование с использованием реагирующей ленты Navbar: как добавить и удалить класс на теге Navbar при прокрутке окна

Question

У меня есть приложение реагирования, которое имеет навигацию по реактивному ремню.

Как я могу добавить и удалить класс в Navbar, когда окно прокручивается до определенной высоты?

таким образом, состояние по умолчанию имеет классы "navbar navbar-expand-sm navbar-light stick-nav"

и когда окно прокручивается до 40px, классы становятся "navbar navbar-expand-sm navbar-light bg-light fixed-top"

затем, когда он прокручивается обратно вверху, его классы возвращаются в состояние по умолчанию.

заранее спасибо.

import React, { Component } from 'react';
import './Header.css';
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink} from 'reactstrap';

class Header extends Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false
    };
  }
  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }



  render() {
    return (

        <Navbar expand="md" className="stick-nav">
          <NavbarBrand href="/">BrandName</NavbarBrand>
          <NavbarToggler onClick={this.toggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className="ml-auto" navbar>
              <NavItem>
                <NavLink href="/link1" className="text-uppercase">link1</NavLink>
              </NavItem>
              <NavItem>
                <NavLink href="/link2" className="text-uppercase">link2</NavLink>
              </NavItem>
              <NavItem>
                <NavLink href="/link3" className="text-uppercase">link3</NavLink>
              </NavItem>
            </Nav>
          </Collapse>
        </Navbar>

    );
  }
}


export default Header;

Answer 1

Вы можете сделать это с помощью window.addEventListener.

componentDidMount() {
    window.addEventListener('scroll', this.mainMenuScroll, false);
}

componentWillUnmount() {
    window.removeEventListener('scroll', this.mainMenuScroll, false);
}

mainMenuScroll() {
    if (window.scrollY >= 40) {
        if (this.state.scrollClass !== true) {
           this.setState({
               scrollClass: true,
           });
        }
    } else if (this.state.scrollClass !== false) {
        this.setState({
            scrollClass: false,
        });
    }
}

Кроме того, обязательно добавьте scrollClass в this.state и привяжите mainMenuScroll в конструкторе. И в className компонента Navbar примените классы, которые вы хотите, когда this.state.scrollClass равен true.