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

Question

我正在 Shopify 商店工作，但我想让这个侧边栏具有粘性和滚动性。可滚动的原因是，当使用 position: sticky; css 标注时，侧边栏看起来非常大，因此直到页面末尾才可见，然后在那一刻我很乐意制作它可滚动，因此我们无需转到页面底部即可进行过滤。我发现了类似 overflow-y: scroll; 的东西，但不能与粘性东西一起使用。我正在分享一些示例图片：IMAGE HERE 1 IMAGE HERE 2

Answer 1

您可能需要将 max-height 属性添加到粘性元素像这样

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

现在您的 sidenav 具有 max-height 屏幕高度，因此如果内容大于容器，它可以应用滚动行为

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

Sticky and scrollable Sidebar sidebar - CSS and HTML

html

css

scroll

sidebar

sticky