反応とCSSを用いたスクロールのNavbarスタイルの変更

最近、以前のプロジェクトのUIを改善してきました.私が学んだクールなものは、ユーザーがスクロールするときのNavbarのスタイルを変えることです.
私のプロジェクトは、白い背景を持っていたウェブカメラの上に白い背景を持つナババーを持っていました.'フローティング'アイテムを削除して、Navbarをより明白にするために、私はスクロールの上でNavbarの背景色を変えました.
Navbarコンポーネントでは

  componentDidMount() {
    window.addEventListener("scroll", this.handleScroll);
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.handleScroll);
  }

  handleScroll = () => {
    if (window.scrollY > 20) {
      document.querySelector(".navbar").className = "navbar 
      scroll";
    } else {
      document.querySelector(".navbar").className = "navbar";
    }
  };

イベントリスナーを追加しましたwindow ユーザーがウェブサイトの上部からスクロールするときに見るオブジェクト.

イベントリスナーは、反応LifeCycleメソッドですcomponentDidMount このコンポーネントが作成されると、一度だけ作成されます.

にもcomponentWillUnmount DOMからコンポーネントを削除するときにイベントリスナーを削除します.

The handleScroll ユーザのスクロール時にメソッドが呼び出されます.このメソッドはclassName Nav要素には、CSSで背景色を上書きすることができます.

window.scrollY ウィンドウオブジェクトのプロパティで、ドキュメントが現在垂直方向にスクロールされているピクセル数を返します.このプロパティを使用して、ユーザーが過去20ピクセルをスクロールしたときを検出します.ユーザーがそうするとき、HTMLはこのように見えます

// scrollY > 20
<nav className="navbar scroll">


// VS
// scrollY = 0
<nav className="navbar">

今私はscroll クラス名を使ってCSSファイルで選択できます.

.navbar {
  background-color: #fff;
}

.scroll {
  background-color: #f1f1f1;
}

The scroll 背景色は、デフォルトの背景色をscroll 下はnavbar CSSファイルで.
読書ありがとうございます!)