仅使用 CSS 的粘性侧边栏（无 javascript）

Question

我想只使用 CSS 制作带有粘性侧边栏的布局。我正在尝试使用position: sticky 这样做，但无法使其工作。 =(

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

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

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

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

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

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>