Как изменить цвет панели навигации при прокрутке в ReactJS?
Следующий подход описывает, как изменить цвет панели навигации при прокрутке страницы в ReactJS. Это простой эффект, который вы можете добавить на любой веб-сайт ReactJS.
Условие:
- Эта статья написана вами, так что проблем с улучшением вручную не возникнет.
- Знание хуков useState() React.
Базовая настройка: вы начнете новый проект, используя приложение create-react-app, поэтому откройте свой терминал и введите:
npx create-react-app navbar-color-change
Теперь перейдите в папку navbar-color-change , введя данную команду в терминале:
cd navbar-color-change
Требуемый модуль: Установите зависимости, необходимые в этом проекте, введя данную команду в терминале:
npm install --save styled-components npm install --save react-icons
Теперь создайте папку компонентов в src, затем перейдите в папку компонентов и создайте два файла Navbar.js и NavbarStyles.js .
Структура проекта: файловая структура проекта будет выглядеть следующим образом:
Пример: в этом примере мы создадим панель навигации, для этого нам нужно будет манипулировать файлом App.js и другим файлом созданных компонентов.
Navbar.js: панель навигации Логика изменения цвета, вот где роль хука useState() вступает в игру.
Мы создаем состояние с первым элементом colorChange в качестве начального состояния, имеющим значение false, и вторым элементом в качестве функции setColorchange() для обновления состояния. Затем создается функция с именем changeNavbarColor , которая устанавливает значение состояния colorChange в true, когда мы прокручиваем страницу вниз, равную или превышающую 80 пикселей. Это делается с помощью функции window.scrollY. Мы использовали это значение 80 пикселей в соответствии со значением высоты нашей панели навигации (80 пикселей). В противном случае значение состояния остается ложным.
Значение состояния colorChange определяет цвет нашей панели навигации с помощью условного оператора. Когда значение нашего состояния равно false, оно присваивает CSS-класс 'navbar' нашему компоненту Navbar, который придает ему прозрачный фоновый цвет. Когда мы прокручиваем равную или большую высоту нашей панели навигации (80 пикселей), значение состояния colorChange становится истинным, и он назначает другой класс CSS «navbar colorChange» нашему компоненту Navbar, который обеспечивает ему цвет фона #000 . Мы определим оба этих класса CSS в нашем файле App.css .
Когда мы начинаем прокручивать страницу вниз, функция changeNavbarColor запускается как событие через свойство window.addEventListener.
NavBar.js
import React, { useState, Fragment } from "react"import { FaBars } from "react-icons/fa"; import { Nav, NavContainer, NavLogo, NavItem, NavLinks, NavMenu, MobileIcon,} from "./NavbarStyles";import "../App.css";const Navbar = () => { const [colorChange, setColorchange] = useState(false); const changeNavbarColor = () =>{ if(window.scrollY >= 80){ setColorchange(true); } else{ setColorchange(false); } }; window.addEventListener("scroll", changeNavbarColor); return ( <Fragment> <Nav className={colorChange ? "navbar colorChange" : "navbar"}> <NavContainer> <NavLogo href="#">GeeksForGeeks</NavLogo> <MobileIcon> <FaBars /> </MobileIcon> <NavMenu> <NavItem> <NavLinks href="#">About</NavLinks> </NavItem> <NavItem> <NavLinks href="#">Services</NavLinks> </NavItem> <NavItem> <NavLinks href="#">Events</NavLinks> </NavItem> <NavItem> <NavLinks href="#">Contact</NavLinks> </NavItem> <NavItem> <NavLinks href="#">Sign In</NavLinks> </NavItem> </NavMenu> </NavContainer> </Nav> </Fragment> )} export default Navbar; |
NavbarStyles.js
import styled from "styled-components";export const Nav = styled.nav` background: transparent; height: 80px; display: flex; justify-content: center; align-items: center; font-size: 1rem; /* Fix your navbar by using below two lines of code */ position: sticky; top:0; /* Fix your navbar by using above two lines of code */ z-index: 10; @media screen and (max-width: 960px) { transition: 0.8s all ease }`; export const NavContainer = styled.div` display: flex; justify-content: space-between; height: 80px; z-index: 1; width: 100%; padding: 0 24px; max-width: 1100px;`; export const NavLogo = styled.a` color: green; justify-self: flex-start; cursor: pointer; font-size: 1.5rem; display: flex; align-items: center; margin-left: 24px; font-weight: bold; text-decoration: none;`; export const MobileIcon = styled.div` display: none; @media screen and (max-width: 768px) { display: block; position: absolute; top:0; right: 0; transform: translate(-100%, 60%); font-size: 1.8rem; cursor: pointer; }`; export const NavMenu = styled.div` display: flex; align-items: center; list-style: none; text-align: center; margin-right: -22px; @media screen and (max-width: 960px) { display: none; }`; export const NavItem = styled.li` height: 80px;`; export const NavLinks = styled.a` color: #808080; display: flex; align-items: center; text-decoration: none; padding: 0 1rem; height: 100%; cursor: pointer; &.active { color: #000000; } ` |
App.css
.navbar{ background-color: transparent;} .navbar.colorChange{ background-color: #000;} |
App.js
import React, { Fragment } from "react"; import Navbar from "./components/Navbar";function App() { return ( <Fragment> <Navbar /> <div style={{overflowY:"scroll", height:"800px"}}></div> </Fragment> ); } export default App; |
Шаг для запуска приложения: Запустите приложение, используя следующую команду из корневого каталога проекта:
npm start
Вывод: посмотрите, как навигационная панель меняет свой цвет на черный при прокрутке вниз и снова становится прозрачной при возвращении наверх.
