使用 nextjs 定位 Sticky

Question

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

<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; 之前，有几件事要记住：

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