React中的粘性侧边栏横跨组件

Question

我想创建一个在某些组件之间移动的粘性侧边栏。CSS的粘性属性允许我(AFAIK(只在创建它的组件内移动，所以我的问题是——只在某些组件上使用粘性侧边栏的最佳解决方案是什么？所有东西都有固定的位置集，我只需要3-4个组件。

export default function Home() {
return (
<div className={styles.container}>
<Navbar />
<LandingPage />
{* from here sticky sidebar *}
<About />
<Products />
{* to this point }
<Footer />
</div>
)
}

Answer 1

创建一个包含About和Product组件的边栏组件。然后以与使用导航栏和LandingPage组件相同的方式使用它。

export default function Sidebar(){
return (
<div className='sidebar'>
<About />
<Products />
</div>
);
};

然后

export default function Home() {
return (
<div className={styles.container}>
<Navbar />
<LandingPage />
<Sidebar />
<Footer />
</div>
)
}