ReactJS - Change navbar color on scroll

Question

I have the following code:

import React, {useState} from 'React';
import Header from './styles.js';

const HeaderComponent = props => 
{
  const [navBg, setNavBg] = useState(false);
  const isHome = props.name === 'Homepage' ? true : false;

  const changeNavBg = () =>
  {
   window.scrollY >= 800 ? setNavBg(true) : setNavBg(false);
  }

  window.addEventListener('scroll', changeNavBg);

  return (
  <Header {...(isHome && navBg ? { backgroundColor: '#00008' : {})} />
  )
}

What I am trying to achieve is that when scrolling past 800px, I want my Header to change colors.

Cheers for your time.

fortunee · Accepted Answer · 2021-06-07 17:32:04Z

4

Here's a couple of approaches you could try

1. Use the React onScroll UI event

 return (
   <div onScroll={changeNavBg}>
     <Header {...(isHome && navBg ? { backgroundColor: '#00008' : {})} />
   </div>
 )

2. Consider binding the listener to a `useEffect`

import React, {useState} from 'React';
import Header from './styles.js';

const HeaderComponent = props => {
  const [navBg, setNavBg] = useState(false);
  const isHome = props.name === 'Homepage' ? true : false;

  const changeNavBg = () => {
   window.scrollY >= 800 ? setNavBg(true) : setNavBg(false);
  }

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

  return (
  <Header {...(isHome && navBg ? { backgroundColor: '#00008' : {})} />
  )
}

answered Jun 7, 2021 at 17:32

fortunee

4,3622 gold badges23 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Weewooweewoo Over a year ago

I have actually managed to fix it by passing navBg as a prop in my styles.js and checking there if its set to true & isHome. I'll mark your answer as correct nonetheless as you deserve it for the given effort. Thank you.

fortunee Over a year ago

Cool. Thanks. Anyways, here's a working example stackblitz.com/edit/react-jddnch?file=src/App.js

Collectives™ on Stack Overflow

ReactJS - Change navbar color on scroll

1 Answer 1

1. Use the React onScroll UI event

2. Consider binding the listener to a `useEffect`

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1. Use the React onScroll UI event

2. Consider binding the listener to a useEffect

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related

2. Consider binding the listener to a `useEffect`