React에서 마우스 스크롤의 navbar 색상 변경

마우스 스크롤에서 탐색 모음의 색상을 변경하려는 간단한 응용 프로그램이 있습니다. Mailchimp의 기능: 아래로 스크롤하면 탐색 모음이 사용자를 따라오지만 색상도 노란색에서 흰색으로 변경됩니다. => 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>

거의 끝났어요. 고려해야 할 사항이 하나 더 있습니다. 내 응용 프로그램에서 전체 App 구성 요소에 CSS 클래스overflow-x: hidden;를 추가하여 수정한 일부 레이아웃 문제가 있었습니다. 그것은 실수였습니다. 전체 앱 구성 요소에 overflow-x: hidden;를 제공하면 window.scrollY는 항상 0에 유지됩니다. 이 문제를 해결하기 위해 App 구성 요소 내에 래퍼 div를 추가하고 오버플로를 숨기면 모든 것이 잘 작동한다는 것을 알았습니다. 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;
}

그게 다야!