使用 nextjs 粘性定位

Question

我是粘性新手，之前没有使用过它，所以我将一些代码（关于粘性侧边栏）复制并粘贴到我的项目中，但它不起作用。

<Layout title="Books">
      <div className="container w-100 row">
        <div className="sticky-top col-sm-3">
          <Filter />
        </div>
        <div className="col-sm-9 ">
          <Books />
        </div>
      </div>
      <Footer />
    </Layout>

Answer 1

如果没有实时预览，很难说清楚。但在使用之前，position: sticky; 有几件事需要记住：

1. position: sticky如果祖先元素具有以下属性值之一，则将不起作用overflow：hidden、scroll或auto
2. top您必须至少指定一个阈值，其中right、bottom、 或 之一left才能使粘性定位按预期运行。