粘性且可滚动的侧边栏 - CSS 和 HTML

Question

我正在 Shopify 商店工作，但我想让这个侧边栏具有粘性和可滚动性。可滚动的原因是，当使用

position: sticky;

css 标注时，侧边栏看起来非常大，因此直到页面末尾才可见，那么在那一刻我希望使其可滚动，以便我们可以在不进行过滤的情况下进行过滤必须转到页面底部。我发现了类似

overflow-y: scroll;

的东西，但不能与粘性的东西一起使用。我正在分享一些示例图片：

Answer 1

您需要为粘性元素添加 max-height 属性 像这样

.side-nav{
  position: sticky;
  overflow-y: scroll;
  max-height: 100vh;
}

现在你的侧导航的最大高度是屏幕的高度（

100vh

），因此如果内容大于容器，它可以应用滚动行为