css - 仅使用 CSS 的粘性侧边栏(无 javascript)

Question

我想只使用 CSS 制作一个带有粘性侧边栏的布局。我正在尝试使用 position: sticky 来做到这一点，但就是无法正常工作。 =(

考虑到我的布局上有两列 - 主要内容(橙色)和侧边栏(绿色) - 当主要内容高度很长且需要滚动时，我无法将侧边栏放在底部。

http://jsfiddle.net/pcwudrmc/74799/

为了更好地说明我想要实现的目标，我附上了这张 gif。

请注意，在我向下滚动到侧边栏底部(绿色)后，它将跟随主要内容，直到到达主要内容的底部。黑色方 block 是视口(viewport)。

编辑:我上传了一个包含整个交互的新动画。

Answer 1

你想要这个吗？

.container {
  display: flex;
  flex-flow: row nowrap;
}

.main-content {
  border: 4px solid orange;
  height: 1000px;
}

.sidebar {
  border: 4px solid green;
  height: 300px;
  position: sticky;
  top:0;
}

<div class="container">
  <div class="main-content">Main content</div>
  <div class="sidebar">Sidebar</div>
</div>