React/Next.js页面滚动时左侧菜单固定的问题与解决

我在开发React/Next.js项目时，想要实现类似Facebook主页的效果——页面滚动时左侧菜单栏保持固定不随页面滚动。尝试了relative、sticky（设置top:0）以及调整overflow属性等方法，左侧栏依然会随页面滚动。

初始页面代码如下：

import { ThemeProvider } from "next-themes";
import Footer from "@/pages/footer/Footer";
import Header from "@/pages/header/Heaader";
import LeftBar from "@/pages/leftbar/Leftbar";
import Feeds from "@/pages/feeds/Feeds";
import Rightbar from "@/pages/rightbar/Rightbar";

export default function Home() {
    return (
        <section className="flex flex-col min-h-screen">
        <header className="sticky top-0 z-10 w-full shadow-md">
            <Header />
        </header>
        <main className="flex justify-around gap-2 overflow-y-auto">
            <section className="sticky top-0 w-20 lg:w-80 shadow border border-blue-500">
                <LeftBar />
            </section>
            <section className="flex-auto flex-grow-2 max-w-3xl border border-red-500">
                <Feeds />
            </section>
            <section className="flex-auto flex-grow-1 max-w-md border border-green-500">
                <Rightbar />
            </section>
            </main>
        </section>
    );
}

最终找到了解决方案：核心是给固定区域添加一个额外的层级。具体来说，在main标签下设置三个平行区块，然后在左侧栏所在的第一个区块中，将子元素设置为fixed定位。修改后的代码如下：

import { ThemeProvider } from "next-themes";
import Footer from "@/pages/footer/Footer";
import Header from "@/pages/header/Heaader";
import LeftBar from "@/pages/leftbar/Leftbar";
import Feeds from "@/pages/feeds/Feeds";
import Rightbar from "@/pages/rightbar/Rightbar";

export default function Home() {
  return (
    <section className="flex flex-col min-h-screen">
      <header className="sticky top-0 z-10 w-full shadow-md">
        <Header />
      </header>
      <main className="flex justify-around gap-2 overflow-y-auto">
        <div className=" top-0">
          <section className=" fixed w-20 lg:w-80 shadow border border-blue-500">
            <LeftBar />
          </section>
        </div>

        <section className="flex-auto flex-grow-2 max-w-3xl border border-red-500">
          <Feeds />
        </section>
        <section className="flex-auto flex-grow-1 max-w-md border border-green-500">
          <Rightbar />
        </section>
      </main>
    </section>
  );
}

内容的提问来源于stack exchange，提问作者cloudpg07