您可以在th中使用position: sticky和top: 0。https://codepen.io/ipetriniith/pen/JjGeOKQ

按照下面列出的步骤，对于***ReactJs***上的粘性头，
Header.js

const Header = () => {
    
        // Sticky Menu Area
        useEffect(() => {
            window.addEventListener('scroll', isSticky);
            return () => {
                window.removeEventListener('scroll', isSticky);
            };
        });
    
               
        /* Method that will fix header after a specific scrollable */
               const isSticky = (e) => {
                    const header = document.querySelector('.header-section');
                    const scrollTop = window.scrollY;
                    scrollTop >= 250 ? header.classList.add('is-sticky') : header.classList.remove('is-sticky');
                };
            return (
        <>
         <header className="header-section d-none d-xl-block">
              ..add header code
         </header>
        </>
      );   
   }

Header.css -自定义样式（为您的标题）

.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    box-shadow: 0 2px 24px 0 rgb(0 0 0 / 15%);
    background-color: #ffffff !important;
    animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
    padding-top: 0px;
    padding-bottom: 0px;
}

注意！

已通过链接编译：https://codesandbox.io/s/sticky-header-dyews?file=/src/App.js

在react中，你需要通过调用useState函数来设置类。
您可以在useEffect中为此设置监听器，该监听器在组件呈现上运行一次。

import React, { useEffect, useState } from "react";

const Header = () => {
  const [sticky, setSticky] = useState("");

  // on render, set listener
  useEffect(() => {
    console.log("hello");
    window.addEventListener("scroll", isSticky);
    return () => {
      window.removeEventListener("scroll", isSticky);
    };
  }, []);

  const isSticky = () => {
    /* Method that will fix header after a specific scrollable */
    const scrollTop = window.scrollY;
    const stickyClass = scrollTop >= 250 ? "is-sticky" : "";
    setSticky(stickyClass);
    console.log(stickyClass);
  };

  const classes = `header-section d-none d-xl-block ${sticky}`;

  return (
    <>
      <header className={classes}>..add header code</header>
    </>
  );
};

export default Header;

Sandbox：https://codesandbox.io/s/sticky-header-forked-ybo6j9
大部分代码都引用了这个答案：https://stackoverflow.com/a/69944800/271932（有正确的CSS但没有react代码）

在阅读了大量实现这一点的js代码之后，我实现了这样的...

.header {
    position: sticky;
    top: 0px;
    z-index: 1;
}

position: sticky很酷。
Its compatibility is also ok
只需注意父元素的高度，大多数情况下，您可能需要将其与React.Fragment配合使用。