how to change text color on scroll in react.js

user_12093475 0
Viewed 1032

Hi I'm having some issue regarding changing text color on scroll in react.js i'm not sure what i'm missing here but simply put the H4 text in default is white in color and should change to black if on scroll

import React, {useState, useEffect} from 'react';
import './Navbar.css';
import {Navbar, Container, Nav} from 'react-bootstrap';

const Navigation = () =>{
    const [navbar, setNavbar] = useState(false);
    const [white, setColor] = useState(false);

    const changeBackground = () => {
        if(window.scrollY >= 80){
            setNavbar(true)
        }else{
            setNavbar(false)
        }
    }

    const changeColor = () => {
        if(window.scrollY >= 80){
            setColor(true)
        }else{
            setColor(false)
        }
    }
    
    window.addEventListener('scroll',changeBackground);
    window.addEventListener('black',changeColor);

    return(
        <Navbar className={navbar ? 'scroll' : 'navbar'} expand="lg">
            <Container>
                <Navbar.Brand href="#home"><h4 className={white ? 'black' : 'white'}>Brand</h4></Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="me-auto">
                        <Nav.Link href="#projects">Tab1</Nav.Link>
                        <Nav.Link href="#blog">Tab2</Nav.Link>
                    </Nav>
                </Navbar.Collapse>
                <Navbar.Collapse className="justify-content-end">
                    <Nav>
                        <Nav.Link href="#contact">Tab3</Nav.Link>
                    </Nav>
                </Navbar.Collapse>
            </Container>
        </Navbar>
    )
};

export default Navigation;

Here's the css file

.navbar {
    width: 100%;
    background-color: transparent;
    display: flex;
    position: fixed;
    top: 0;
    min-height:6vh;
    justify-content: space-between;
    transition: background-color 0.4s ease-out;
    flex-direction: row;
}

.black {
    color: #000000;
}

.white {
    color: #FFFFFF;
}

.scroll {
    background-color: #FFFFFF;
}

How can i be able to properly execute this? or am i really missing something else?

reactjs javascript
2 Answers

I updated your code as follows. If we registered the functions on every render, it will affect the memory leaking. So I inserted the appending event listener into the useEffect without dependencies(it is the same case component Didmount and componentWillUnmount)

In my opinion, the most important updated part from above code the event black can't be understandable so I added the function scroll event.

import React, { useEffect, useState } from 'react';
import { Navbar, Container, Nav } from 'react-bootstrap';
import './Navigation.css';

const Navigation = () => {
  const [navbar, setNavbar] = useState(false);
  const [color, setColor] = useState(false);

  const changeBackground = () => {
    if (window.scrollY >= 80) {
      setNavbar(true);
      setColor('black');
    } else {
      setNavbar(false);
      setColor('white');
    }
  };

  useEffect(() => {
    window.addEventListener('scroll', changeBackground, true);
    return () => window.removeEventListener('scroll', changeBackground);
  }, []);

  return (
    <Navbar
      className={navbar ? 'scroll' : 'navbar'}
      expand='lg'
      style={{
        position: 'fixed',
        backgroundColor: 'white',
      }}
    >
      <Container>
        <Navbar.Brand href='#home'>
          <h4 className={color}>Brand</h4>
        </Navbar.Brand>
        <Navbar.Toggle aria-controls='basic-navbar-nav' />
        <Navbar.Collapse id='basic-navbar-nav'>
          <Nav className='me-auto'>
            <Nav.Link href='#projects'>Tab1</Nav.Link>
            <Nav.Link href='#blog'>Tab2</Nav.Link>
          </Nav>
        </Navbar.Collapse>
        <Navbar.Collapse className='justify-content-end'>
          <Nav>
            <Nav.Link href='#contact'>Tab3</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
};

export default Navigation;

The screenshot

https://i.imgur.com/n3fPYgE.png
https://i.imgur.com/X1ycdky.png

user_117317710

Your event listener that is supposed to change color is attached to the wrong event. It should be attached to scroll event.

window.addEventListener('black',changeColor); // incorrect event name 'black'

// Change to 
window.addEventListener('scroll',changeColor);
user_27674440
Related