CODEWITHSUNDEEP
javascriptreactjs
Ian Ducao
Ian Ducao

Reputation: 207

how to change text color on scroll in react.js

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?

Upvotes: 2

Views: 2549

Answers (2)

Sudhir
Sudhir

Reputation: 126

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);

Upvotes: 0

Reinis
Reinis

Reputation: 505

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.sstatic.net/t5guv.png
https://i.sstatic.net/13zHV.png

Upvotes: 2

Related Questions