¿Cómo cambiar el color de la barra de navegación cuando se desplaza en ReactJS?

El siguiente enfoque cubre cómo cambiar el color de la barra de navegación cuando se desplaza por la página en ReactJS. Es un efecto simple que puede agregar a cualquier sitio web de ReactJS.

Requisito previo:

1. Este artículo está escrito por usted, por lo que no habrá ningún problema con la mejora manual.
2. Conocimiento de useState() React Hooks .

Configuración básica: comenzará un nuevo proyecto usando create-react-app, así que abra su terminal y escriba:

npx create-react-app navbar-color-change

Ahora vaya a la carpeta de cambio de color de su barra de navegación escribiendo el comando dado en la terminal:

cd navbar-color-change

Módulo requerido: Instale las dependencias requeridas en este proyecto escribiendo el comando dado en la terminal:

npm install --save styled-components
npm install --save react-icons

Ahora cree la carpeta de componentes en src, luego vaya a la carpeta de componentes y cree dos archivos Navbar.js y NavbarStyles.js . 

Estructura del proyecto: la estructura de archivos en el proyecto se verá así:

Ejemplo: en este ejemplo, diseñaremos una barra de navegación, para eso necesitaremos manipular el archivo App.js y otros archivos de componentes creados.

Navbar.js: NavbarColor Change Logic, ahí es donde entra en juego el papel del gancho useState() .

Creamos un estado con el primer elemento colorChange como estado inicial que tiene un valor falso y el segundo elemento como función setColorchange() para actualizar el estado. Luego se crea una función con el nombre changeNavbarColor que establece el valor del estado colorChange en verdadero cuando nos desplazamos hacia abajo en la página igual o más de 80px. Esto se hace con la ayuda de la función window.scrollY . Hemos utilizado este valor de 80 px de acuerdo con el valor de la altura de nuestra barra de navegación (80 px). De lo contrario, el valor del estado sigue siendo falso.

El valor de state colorChange decide el color de nuestra barra de navegación con la ayuda de un operador condicional. Cuando el valor de nuestro estado es falso, asigna una clase CSS de ‘navbar’ a nuestro componente Navbar que le proporciona un color de fondo transparente. Cuando nos desplazamos igual o más que la altura de nuestra barra de navegación (80 px), el valor del estado colorChange se vuelve verdadero y asigna una clase CSS diferente de ‘navbar colorChange’ a nuestro componente Navbar que le proporciona un color de fondo de #000 . Definiremos estas dos clases de CSS en nuestro archivo App.css .

Cuando comenzamos a desplazarnos hacia abajo en la página, la función changeNavbarColor se activa como un evento a través de la propiedad window.addEventListener .

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;

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; 
  } 
`

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

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;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: vea cómo la barra de navegación cambia su color a negro al desplazarse hacia abajo y se vuelve transparente nuevamente al volver a la parte superior.