滾動到特定位置時如何更改導航欄顏色？

Question

我正在嘗試在使用新的默認（從 16.8 開始）合成器的同時學習鈎子和事件處理。 我已經知道如何通過單擊按鈕來更改狀態並使用它來通過單擊來展開菜單，但是如何在到達某個位置時更改此顏色狀態？

...
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 時，它會更改導航欄顏色。