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

Question

I'm trying to learn hooks and event handling while using a new default (from 16.8) synthax. I already know how to change state by a button click and use it to make my menu expand by clicking, but how do I change this coloured state when a certain position is reached?

...
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

You can use window.addEventListener('scroll', this.handleScroll, { passive: true }) to listen to scroll position change.

Check this example I've prepared for you: https://codesandbox.io/s/semantic-ui-react-responsive-navbar-2lq7v

As scroll position becomes greater than 200, it changes the navbar color.