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

Question

我正在尝试学习 Hook 和事件处理，同时使用新的默认(从 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 时，它会更改导航栏颜色。