在 ReactJS 中滚动时如何更改导航栏颜色？

以下方法介绍了如何在 ReactJS 中滚动页面时更改导航栏颜色。这是一个可以添加到任何 ReactJS 网站的简单效果。

先决条件：

1. 本文由您撰写，因此手动改进不会有任何问题。
2. useState() React Hooks的知识。

基本设置：您将使用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 中创建components文件夹，然后转到 components 文件夹并创建两个文件Navbar.js和NavbarStyles.js 。

项目结构：项目中的文件结构将如下所示：

示例：在此示例中，我们将设计一个导航栏，为此我们需要操作 App.js 文件和其他创建的组件文件。

Navbar.js：导航栏 Color Change Logic，这就是useState()钩子发挥作用的地方。

我们创建一个状态，第一个元素 colorChange 作为初始状态，其值为 false，第二个元素作为函数setColorchange()用于更新状态。然后创建一个名为changeNavbarColor的函数，当我们向下滚动页面等于或大于 80 像素时，它将状态 colorChange 的值设置为 true。这是在window.scrollY函数的帮助下完成的。我们根据导航栏高度（80px）的值使用了这个 80px 的值。否则状态值保持为假。

state colorChange 的值在条件运算符的帮助下决定了导航栏的颜色。当我们的状态值为 false 时，它会为我们的 Navbar 组件分配一个 CSS 类“navbar” ，从而为其提供透明的背景色。当我们滚动等于或大于导航栏的高度（80 像素）时，状态 colorChange 的值变为 true，它为我们的导航栏组件分配不同的 CSS 类“导航栏颜色更改” ，从而为其提供 #000 的背景颜色.我们将在App.css 文件中定义这两个 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 (
      
        

           
              GeeksForGeeks
              
               
              
              
                
                  About
                
                
                  Services
                
                
                  Events
                
                
                  Contact
                
                
                  Sign In
                
              
           
        
      
    )
}
  
export default Navbar;

导航栏样式.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; 
  } 
`

应用程序.css

.navbar{
    background-color: transparent;
}
  
.navbar.colorChange{
    background-color: #000;
}

应用程序.js

import React, { Fragment } from 'react'; 
import Navbar from './components/Navbar';
function App() { 
  return ( 
    
       
       
 
    
  ); 
} 
    
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：查看导航栏如何在向下滚动时将其颜色变为黑色，并在返回顶部时再次变为透明。