Javascript 使用reactstrap navbar作出反应：如何在窗口滚动时添加和删除navbar标记上的类

我有一个react应用程序，它有一个reactstrap导航

当窗口向下滚动到一定高度时，如何向navbar添加和删除类

因此，默认状态为“navbar navbar expand sm navbar light stick nav”类

当窗口滚动40px高度时，类将变为“导航栏导航栏扩展sm导航栏灯bg灯固定顶部”

然后，当它被卷回顶部时，它的类将返回到默认状态

提前谢谢

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;

import React，{Component}来自'React'；
导入“./Header.css”；
进口{
崩溃
导航栏，
纳瓦巴托格勒，
纳瓦巴兰，
导航，
纳维坦，
来自“reactstrap”的NavLink}；
类头扩展组件{
建造师（道具）{
超级（道具）；
this.toggle=this.toggle.bind（this）；
此.state={
伊索彭：错
};
}
切换（）{
这是我的国家({
isOpen:！this.state.isOpen
});
}
render（）{
返回(
品牌名称
链接1
链接2
链接3
);
}
}
导出默认标题；

您可以使用

窗口。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,
        });
    }
}

另外，确保在this.state中添加

scrollClass

，并在构造函数中绑定

mainMenuScroll

在导航栏组件的

className

中，当

此.state.scrollClass

等于

true

时，应用所需的类