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

Question

我正在 Shopify 商店工作，但我想让这个侧边栏具有粘性和可滚动性。可滚动的原因是，当使用position: sticky;CSS标注时，侧边栏看起来非常大，因此直到页面末尾才可见，那么在那一刻我想让它可滚动，这样我们就可以过滤而不必去到页面底部。我发现了类似的东西overflow-y: scroll;，但不能与粘性的东西一起使用。我正在分享一些示例图片：此处图片 1 图片此处 2

Answer 1

您可能需要向粘性元素添加 max-height 属性，如下所示

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

现在你的 sidenav 的最大高度是屏幕的高度，因此如果内容大于容器，它可以应用滚动行为