我有一个反应应用程序,它有一个反应带导航。
当窗口向下滚动到某个高度时,如何在导航栏中添加和删除类?
所以默认状态是一个类" 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;
答案 0 :(得分:0)
您可以使用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,
});
}
}
此外,请确保在this.state中添加scrollClass并在构造函数中绑定mainMenuScroll。 并且在Navbar Component的className中,当this.state.scrollClass等于true时,应用所需的类。