将导航栏滚动到特定位置时如何更改导航栏颜色？

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时，它将更改导航栏的颜色。