Как изменить цвет навигационной панели при ее прокрутке до определенной позиции? - PullRequest
Новая
       12

Как изменить цвет навигационной панели при ее прокрутке до определенной позиции?

2 голосов
/ 06 июля 2019

Я пытаюсь изучить хуки и обработку событий при использовании нового синтаксиса по умолчанию (с 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;

1 Ответ

1 голос
/ 06 июля 2019

Вы можете использовать window.addEventListener('scroll', this.handleScroll, { passive: true }) для прослушивания изменения положения прокрутки.

Проверьте этот пример, который я подготовил для вас: https://codesandbox.io/s/semantic-ui-react-responsive-navbar-2lq7v

Поскольку положение прокрутки становится больше 200, оноизменяет цвет навигационной панели.

...