使用nextjs定位Sticky

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:属性具有下列值之一，则auto
2. You sticky将无法工作：hidden、scroll或overflow必须指定至少有一个top、right、bottom或left的阈值，以便按预期进行粘性定位。

G 217