如何在 NextJS 中制作像 Facebook 一样的 Sticky Sidebar？

Question

我正在尝试像 Facebook 那样在 NestJS 中制作一个粘性侧边栏，但是当我滚动页面内容时，其中的侧边栏也会滚动，但它不应该滚动。它应该独立工作，并且只有在滚动时才滚动，即使它在正在滚动的父元素中也是如此。有谁知道它应该是什么样子？

主页代码：

import Header from "../components/Header";
import NavBar from "../components/NavBar";
import SideBar from "../components/home/SideBar";
import CreatePost from "../components/CreatePost";
import Posts from "../components/Posts";

import Announcements from "../components/Announcements";

import "../components/home/Home.css";
import { useEffect, useRef } from "react";

const HomePage = () => {

  const pageContentRef = useRef<HTMLDivElement>(null);
  const sidebarRef = useRef<HTMLDivElement>(null);

  return (
    <div className="theme-dark">
      <Header />
      <div className="main-content" id="main-content">
        <NavBar />
        <main className="page-content" id="page-content" ref={pageContentRef}>
          <div className="page-wrapper">
            <div className="page-subcontent" id="home-page">
              <div className="container">
                <div className="page-inner">
                  <div className="page-outer">
                    <CreatePost />
                    <Posts />
                  </div>
                </div>
              </div>
            </div>
            <SideBar pageContentRef={pageContentRef} sidebarRef={sidebarRef} />
          </div>
        </main>
        <Announcements />
      </div>
    </div>
  );
};
  
export default HomePage;

侧边栏代码：

import "./SideBar.css"
import { useEffect } from "react";

const SideBar = ({ pageContentRef, sidebarRef })  => {

  useEffect(() => {
    const sidebar = sidebarRef.current;

    const handleScroll = () => {
      if (sidebar) {
        sidebar.style.transform = `translateY(${pageContentRef.current.scrollTop}px)`;
      }
    };

    sidebar.addEventListener('scroll', handleScroll);
    return () => {
      sidebar.removeEventListener('scroll', handleScroll);
    };
  }, [sidebarRef]);

  return (
    <div className="page-sidebar" id="sidebar" ref={sidebarRef}>
      <div className="sidebar-inner">
        <div className="sidebar-header">
            <h3 className="sidebar-headding">Section #1</h3>
            <h3 className="sidebar-headding">Section #2</h3>
        </div>
        <div className="sidebar-list" id="online-friends">
            <h3 className="sidebar-headding"><i className="fas fa-user-friends"></i> Dostępni Znajomi</h3>
        </div>
      </div>
    </div>
  );
};

export default SideBar;

CSS 样式：

#page-content {
    position: relative;
    top: 56px;
    left: 61px;
    display: flex;
    flex-direction: column;
    width: calc(100% - 61px);
    min-height: calc(100vh - 56px);
}

.page-wrapper {
    position: relative;
    display: flex;
    justify-content: space-between;
}

#sidebar {
    position: sticky;
    top: 56px;
    bottom: 0;
    flex-basis: 360px;
    min-width: 200px;
    max-width: 360px;
    min-height: inherit;
    height: calc(100vh - 56px);
    background-color: #252525;
    overflow: hidden;
}

#sidebar > .sidebar-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex-shrink: 1;
    flex-grow: 1;
    padding: 0 16px;
    z-index: 0;
}