向下滚动时，使侧块保持在同一水平面上

Question

我需要这个布局：

当您向下滚动时，red块应与green块保持同一级别：

我尝试使用网格来解决此问题： （plunker）

<div class="row md-padding">
  <div class="col-xs-3" style="background-color:red">
    <div>
      <h3>Red</h3>
    </div>
  </div>

  <div class="col-xs-5" style="margin-left:10px;margin-right:10px; background-color:green;">
    <div class="row">
      <h3 class="text-center">Green</h3>
    </div>
  </div>

  <div class="col-xs-3" style="background-color:red">
    <div>
      <h3>Red</h3>
    </div>
  </div>
</div>

它确实将红色块放在应有的位置，但是当你向下滚动时，它们就不再可见了。

如何让红色积木保持在同一水平？（如img2所述）

Answer 1

你正在寻找

position:fixed;

更新plunkr