В этом уроке я объясню, как сделать навигационную панель(navbar) скрытой или отображаемой при прокрутке страницы. Это версия для React.js, которая использует состояние(State) компонента, чтобы всегда знать, каково текущее состояние(State) нашей навигационной панели(navbar).
Компонент
Теперь посмотрим, какие детали нужны нашему компоненту. Прежде всего, как мы уже говорили, мы сохраним положение прокрутки в нашем State, создадим новое значение для State внутри, которое примет начальное значение смещения страницы. constructor()
Конечно, нам также понадобится метод, который вернет a со всеми navbar элементами внутри. Вот первый взгляд: render()nav
Вот CSS:
Идеально, наш компонент готов к просмотру в браузере, но еще не имеет того поведения, которое мы хотим. Давайте сделаем это!
Во-первых, нам нужно будет написать функцию, которая скрывает или отображает навигационную панель. Она будет вызываться так, как если бы это было событие. Она будет видеть, является ли текущее смещение больше или меньше предыдущего смещения, в зависимости от того, прокручиваем ли мы вверх или вниз. Если смещение больше, то мы идем вверх, поэтому будет отображаться меню. Наоборот — скрываться. Это поведение show/hide управляется переменной visible state.
Теперь функция готова. Но нам нужно вызывать её каждый раз, когда пользователь прокручивает экран. Мы будем использовать методы жизненного цикла для добавления и удаления этого слушателя в scroll.
И на этом мы заканчиваем наш компонент. Ниже весь код целиком. Надеюсь, вам понравилось, я буду загружать контент чаще. До скорой встречи!