javascript - 如何在 React 中实现上下滚动的标题动画？

Question

我正在使用 How to create sticky headers on scroll with react 并尝试将其复制到 React 中。 我想将此 jQuery 代码转换为 React，但不知道该怎么做:

$(window).scroll(function () {
  if ($(document).scrollTop() > 50) {
    $(".nav").addClass("affix");
    console.log("OK");
  } else {
    $(".nav").removeClass("affix");
  }
});

这是我到目前为止所拥有的。我不确定如何做到这一点，以便当您滚动一定量时，会发生一些事情，在本例中 jQuery 使 CSS 发生变化:

import { useRef, useState } from "react";
import "./Navbar1.css";
import QueensLogoH from "./NavbarAssets/queens-logo-horizontal.png";

export default function App() {
  const [isActive, setIsActive] = useState(false);
  const mainListDivRef = useRef(null);

  function onClickNavTrigger() {
    setIsActive((a) => !a);
    const mainListDivEl = mainListDivRef.current;
    mainListDivEl.classList.toggle("show_list");
  }

  return (
    <>
      <nav className="nav">
        <div className="container">
          <div className="logo">
            <a href="#">
              <img src={QueensLogoH} height="80"></img>
            </a>
          </div>
          <div id="mainListDiv" className="main_list" ref={mainListDivRef}>
            <ul className="navlinks">
              <li>
                <a href="#">About</a>
              </li>
              <li>
                <a href="#">Portfolio</a>
              </li>
              <li>
                <a href="#">Services</a>
              </li>
              <li>
                <a href="#">Contact</a>
              </li>
            </ul>
          </div>
          <span className={`navTrigger ${isActive ? "active" : ""}`} onClick={onClickNavTrigger}>
            <i></i>
            <i></i>
            <i></i>
          </span>
        </div>
      </nav>

      <section className="home"></section>
      <div style={{ height: "1000px" }}>
        {/* <!-- just to make scrolling effect possible --> */}
        <h2 className="myH2">What is this ?</h2>
        <p className="myP">This is a responsive fixed navbar animated on scroll</p>
        <p className="myP">
          I took inspiration from ABDO STEIF (
          <a href="https://codepen.io/abdosteif/pen/bRoyMb?editors=1100">
            https://codepen.io/abdosteif/pen/bRoyMb?editors=1100
          </a>
          ) and Dicson{" "}
          <a href="https://codepen.io/dicson/pen/waKPgQ">(https://codepen.io/dicson/pen/waKPgQ)</a>
        </p>
        <p className="myP">I HOPE YOU FIND THIS USEFULL</p>
        <p className="myP">Albi</p>
        <p className="myP">random text</p>
      </div>
    </>
  );
}

Answer 1

您可以使用 scrolled 状态和 useEffect，在回调中编写与 jQuery 对应的 JS 代码。

不同之处在于，您可以使用 true 或 false 调用 setScrolled() 并使用 scrolled 添加有条件地将类affix添加到您的nav上。就像这样:

import { useEffect, useRef, useState } from "react";
import "./Navbar1.css";
import QueensLogoH from "./NavbarAssets/queens-logo-horizontal.png";

export default function App() {
  const [isActive, setIsActive] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const mainListDivRef = useRef(null);

  function onClickNavTrigger() {
    setIsActive((a) => !a);
    const mainListDivEl = mainListDivRef.current;
    mainListDivEl.classList.toggle("show_list");
  }

  useEffect(() => {
    const listenToScroll = () => {
      if (window.pageYOffset > 50) {
        setScrolled(true);
      } else {
        setScrolled(false);
      }
    };
    window.addEventListener("scroll", listenToScroll);
    return () => window.removeEventListener("scroll", listenToScroll);
  }, []);

  return (
    <>
      <nav className={"nav " + (scrolled ? "affix" : "")}>
        <div className="container">
          <div className="logo">
            <a href="#">
              <img src={QueensLogoH} height="80"></img>
            </a>
          </div>
          <div id="mainListDiv" className="main_list" ref={mainListDivRef}>
            <ul className="navlinks">
              <li>
                <a href="#">About</a>
              </li>
              <li>
                <a href="#">Portfolio</a>
              </li>
              <li>
                <a href="#">Services</a>
              </li>
              <li>
                <a href="#">Contact</a>
              </li>
            </ul>
          </div>
          <span className={`navTrigger ${isActive ? "active" : ""}`} onClick={onClickNavTrigger}>
            <i></i>
            <i></i>
            <i></i>
          </span>
        </div>
      </nav>

      <section className="home"></section>
      <div style={{ height: "1000px" }}>
        {/* <!-- just to make scrolling effect possible --> */}
        <h2 className="myH2">What is this ?</h2>
        <p className="myP">This is a responsive fixed navbar animated on scroll</p>
        <p className="myP">
          I took inspiration from ABDO STEIF (
          <a href="https://codepen.io/abdosteif/pen/bRoyMb?editors=1100">
            https://codepen.io/abdosteif/pen/bRoyMb?editors=1100
          </a>
          ) and Dicson{" "}
          <a href="https://codepen.io/dicson/pen/waKPgQ">(https://codepen.io/dicson/pen/waKPgQ)</a>
        </p>
        <p className="myP">I HOPE YOU FIND THIS USEFULL</p>
        <p className="myP">Albi</p>
        <p className="myP">random text</p>
      </div>
    </>
  );
}

请注意，当用户向下滚动时，我们可能会多次调用 setScrolled(true) ，但由于如果您向状态 setter 提供相同的值，React 不会重新渲染，因此不会这里有一个问题。