时间戳

首页 > 解决方案 > React 中跨组件的粘性侧边栏

css - React 中跨组件的粘性侧边栏

问题描述

我想创建一个在某些组件上移动的粘性侧边栏。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>
        )
    }

标签： cssreactjs

解决方案

创建一个包含 About 和 Product 组件的 Sidebar 组件。然后像使用 Navbar 和 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>
  )
}

推荐阅读