滚动到某个位置时如何更改导航栏颜色？

Question

我正在尝试使用新的默认值(从16.8(Synthax学习挂钩和事件处理。我已经知道如何通过单击按钮更改状态并使用它来通过单击来扩展我的菜单，但是当达到某个位置时，我该如何更改此彩色状态？

...
function Demo() {
  const [coloured, setColoured] = useState(true);
    return (
      <Navbar className="navbar" style={{backgroundColor: coloured? 'red' : 'black'}}>
        <NavbarBrand href="/">Navbar</NavbarBrand>
        <Nav className='mr-auto' navbar>
            <NavItem>
                <NavLink href="/" className="active">Item1</NavLink>
            </NavItem>
            <NavItem>
              <NavLink href="/">Item2</NavLink>
            </NavItem>
          </Nav>
      </Navbar>
    )
}
export default Demo;

Answer 1

您可以使用 window.addEventListener('scroll', this.handleScroll, { passive: true })来收听滚动位置更改。

检查我为您准备的示例：https://codesandbox.io/s/semantic-ui-react-responsive-navbar-2lq7v

随着滚动位置大于200，它会改变Navbar颜色。