Изменение цвета навигационной панели при прокрутке мыши в React

У меня есть простое приложение, в котором я хочу менять цвет навигационной панели при прокрутке мыши. Подобно тому, как это делает Mailchimp: Когда вы прокручиваете вниз, navbar следует за вами, но также меняет свой цвет с желтого на белый => https://mailchimp.com/.

Для этого у меня есть файлы App.js, Navbar.js, app.css, navbar.css и многие другие, как и некоторые другие компоненты, чтобы у приложения было достаточно места для прокрутки вниз, но именно на них я покажу логику.

В Navbar.js я добавляю следующий фрагмент =>

  const [color, setColor] = useState(true);

  const changeColor = () => {
    //scroll points go up as the page is scrolled down
    if (window.scrollY <= 0) {
      setColor(true);
      // console.log("true");
      // console.log(window.scrollY);
    } else {
      setColor(false);
      // console.log("false");
      // console.log(window.scrollY);
    }
  };
// every part of this function is necessary.
//It won't work if you emit the ", true" parameter
  window.addEventListener("scroll", changeColor, true);

а в моем navbar.css я добавляю следующие классы =>

.navbarComp {
  background: #ffe01b ;
  transition: 0.3s;
}

.navbarScrolled {
  background-color: white ;
  color: white;
}

Затем я возвращаюсь в компонент Navbar.js и добавляю тернарный оператор к этим css-классам следующим образом =>

      <div className={color ? "navbarComp" : "navbarScrolled"}></div>

Я почти закончил. Есть еще одна вещь, которую я должен рассмотреть. В моем приложении были некоторые проблемы с версткой, которые я исправил, добавив overflow-x: hidden; css-класс ко всему компоненту App. Это было ошибкой. Когда вы задаете overflow-x: hidden; всему компоненту App, то window.scrollY всегда остается на 0. Чтобы решить эту проблему, я обнаружил, что если добавить оберточный div внутри компонента App и скрыть там переполнение, то все работает хорошо. Я говорю о том, чтобы сделать это в App.js=>

const App = () => {
  return (
    <div className="App">
      <div className="wrapper">
         ...
      </div>
    </div>
  );
};

и в моем app.css.

.App {
    //or whatever you give I guess
  height: 100vh;
  width: 100vw;
}
.wrapper {
  overflow-x: hidden;
}

Вот и все, друзья!