Javascript 当导航栏处于'；滚动到某个位置？

我试图学习挂钩和事件处理，同时使用新的默认（16.8版）Syntax。我已经知道如何通过点击按钮来改变状态，并使用它来通过点击使我的菜单扩展，但是当到达某个位置时，我如何改变这种彩色状态

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

。。。
函数Demo（）{
const[colored，setcolored]=使用状态（true）；
返回(
导航栏
项目1
项目2
)
}
导出默认演示；

您可以使用

window.addEventListener（'scroll'，this.handleScroll，{passive:true}）

收听滚动位置的更改

检查我为您准备的示例：

---

当滚动位置大于200时，导航栏颜色会发生变化。

您是否尝试使用钩子开始侦听滚动，并在侦听器内部计算当前位置与预期位置之间的差异？