如何使滾動從 jquery 工作到 React js

Question

我正在嘗試使用 scrollY 使用 react 添加和刪除類。 我讓它與 jquery 一起工作，但似乎無法掌握如何將它轉換為 React。 這是之前和之后。 我不知道如何定位位於不同文件夾中 Navbar.js 中的 .navbar。 請幫忙！

 $(document).ready(function(){ $(window).scroll(function(){ // sticky navbar on scroll script if(this.scrollY > 20){ $('.navbar').addClass("sticky"); }else{ $('.navbar').removeClass("sticky"); }

 import React, { Component, useEffect } from 'react'; import Animate from 'animate.css-react'; import Navbar from '../Navigation/Navbar' export default function Scroll() { const[scroll, setScroll] = useState(false); useEffect(() => { window.addEventListener("scroll", () => { if(window.scrollY > 20) { $('.navbar').addClass("sticky"); }else{ $('.navbar').removeClass("sticky"); } }); }, []); }

Answer 1

理想情況下，您可以使用附加到導航欄的 React ref 來訪問底層 DOMNode，但有時這是不可能的，在這些情況下，您可以使用document.getElementById 。

export default function Scroll() {
  ...

  useEffect(() => {
    const navBar = document.getElementById(".navbar");

    const scrollHandler = () => {
      if (window.scrollY > 20) {
        navBar?.addClass("sticky");
      } else {
        navBar?.removeClass("sticky");
      }
    }
        
    window.addEventListener("scroll", scrollHandler);
    
    // Return effect cleanup function to remove listener
    return () => {
      window.removeEventListener("scroll", scrollHandler);
    };
  }, []);
}