スクロールしてNavbarの変更の背景色を反応

現在、私はクライアントのための新しいウェブサイトを開発しています.私は、ウェブサイトを構築するために、gatsbyjsとstrapi cmsを使用しています.
このチュートリアルでは、GatsByJSによるNavbarのスムーズなスクロールの背景とロゴの変更をどのように構築するかを説明します.

必要条件:

usestate ()の知識はフックを反応させます.

useAffect ()の知識はフックを反応させます.

コンポーネントを作成します.
私の場合、私はNavbarのすべてのスタイルが生きるNavbar.jsのコンポーネントとNavbar.jsファイルを作成しました.
コンポーネントのボイラープレートを準備し、USENTとUseEffectフックをインポートした後、NavbarをFalseの値を持つ初期状態としてNavbarと呼び、関数を2番目の要素として状態を更新します.
そして、私が私のnavbarの高さである私のケースで、66 px以上に等しいページをスクロールするとき、私がChangebackgroundによって呼ばれる関数を作成して、状態Navbarの値をtrueにセットします.これはウィンドウの助けを借りて行われます.scrolly関数.私は私たちのNavbarの高さ(66 px)の値に従ってこの66 px値を使用しました.それ以外の場合、状態値はfalseのままです.

/navbar scroll changeBackground function
  const changeBackground = () => {
    console.log(window.scrollY)
    if (window.scrollY >= 66) {
      setNavbar(true)
    } else {
      setNavbar(false)
    }
  }

Navbarの背景色の変更のレンダリングを作成するには、ChangeBackground関数とChangeBackground関数を渡すイベントリスナーを渡します.

useEffect(() => {
    changeLogo()
    // adding the event when scroll change Logo
    window.addEventListener("scroll", changeLogo)
  })

最後に、次のようにNavbarタグクラス名に条件付きステートメントを追加する必要があります.

 <nav className={navbar ? "navbar active" : "navbar"}>

私は、これがあなたを助けることを望みます、あなたがあなたのNavbarロゴで同じことをしたいならば、私は下で私の全部のNavbar構成要素をつけている時から、それを見ることができます.コーディングを維持、学習を続ける!

import React, { useState, useEffect } from "react"
// importing navbar styles
import "../assets/css/navbar.css"
import logo from "../assets/images/logo.svg"
import logoBlue from "../assets/images/logo-blue.svg"
// responsive menu toggle icon
import { FaAlignRight } from "react-icons/fa"
// all the navbar links coming from the links constants
import pageLinks from "../constants/links"
// Link from gatsby
import { Link } from "gatsby"
const Navbar = () => {
  //navbar scroll when active state
  const [navbar, setNavbar] = useState(false)

  //logo scroll when active
  const [navbarLogo, setNavbarLogo] = useState(logo)

  //navbar scroll changeBackground function
  const changeBackground = () => {
    console.log(window.scrollY)
    if (window.scrollY >= 66) {
      setNavbar(true)
    } else {
      setNavbar(false)
    }
  }

  useEffect(() => {
    changeBackground()
    // adding the event when scroll change background
    window.addEventListener("scroll", changeBackground)
  })

  //logo scroll function
  const changeLogo = () => {
    if (window.scrollY >= 60) {
      setNavbarLogo(logoBlue)
    } else {
      setNavbarLogo(logo)
    }
  }

  useEffect(() => {
    changeLogo()
    // adding the event when scroll change Logo
    window.addEventListener("scroll", changeLogo)
  })

  return (
    <nav className={navbar ? "navbar active" : "navbar"}>
      <div className="nav-center">
        <div className="nav-header">
          <Link to="/">
            <img src={navbarLogo} alt="logo" />
          </Link>
          <button type="button" className="toggle-btn">
            <FaAlignRight />
          </button>
        </div>
        <div className="nav-links">
          {pageLinks.map(links => {
            return (
              <Link key={links.id} to={links.url}>
                {links.text}
              </Link>
            )
          })}
        </div>
      </div>
    </nav>
  )
}

export default Navbar

Githubの上で私に続いてください
https://github.com/cesareuseche