在 React 或 Gatsby 中滾動時如何更改鏈接導航欄顏色？

Question

滾動時，我想根據 Id 更改顏色鏈接。 我怎樣才能做到這一點？

例子：

     <div>
          <nav>
            <div className="bg-mainColor h-16 flex justify-between">
              <div className="text-white">Navbar</div>

              <div>
                <Link to="/" className="text-white">
                  Home
                </Link>
                <Link to="#first" className="text-white">
                  Features
                </Link>
                <a href="#" className="text-white">
                  Courses
                </a>
              </div>
            </div>
          </nav>

          <div className="min-h-screen" id="feature">
            Features
          </div>

          <div className="min-h-screen" id="course">
            Courses
          </div>

        </div>

檢查這張圖片以了解我更多

Answer 1

您必須在您的鏈接中添加一個 Id 並在您的 componentDidMount 上添加一個事件偵聽器：

componentDidMount() {
  document.addEventListener('scroll' , this.handleScroll)
}

你的handleScroll就像：

handleScroll  = (event) => {
  //handle your event base on scroll in pixels or what ever for example : 
  if(window.scrollY > 100) {
     let aEl = document.getElementById('YOUR_LINK_ID');
     aEl.setAttribute("style" , "color : red")

  } 
}

並且不要忘記在ComponentWillUnMount上removeEventListener ：

componentWillUnMount() {
  document.removeEventListener('scroll',this.handleScroll);
}