向下滚动时使侧块保持在同一水平答案

【问题标题】：Make side blocks stay on the same level when scrolling down向下滚动时使侧块保持在同一水平
【发布时间】：2016-05-21 04:55:52
【问题描述】：

我需要这样的布局：

当您向下滚动时，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 所述）

【问题讨论】：

你的意思是说只有绿色可以滚动吗？
@HebleV 不，我的意思是当你滚动时，红色块在灰色块隐藏之前正常运行，之后它们是fixed
所以你的意思是当你向下滚动时，灰色向上，然后红色应该占据那个地方，然后固定在那个地方？
只需使用由onscroll 触发的JavaScript 函数。如果scroll > grayBarHeight 那么red position fixed。虽然请注意，我不确定固定元素的响应速度如何。

标签： html css twitter-bootstrap twitter-bootstrap-3 grid

【解决方案1】：

你正在寻找

position:fixed;

更新plunkr

【讨论】：

这不是我所需要的。当您滚动它时，我需要将其固定并位于页面顶部（图 2）。你的建议，使它固定在页面的中间。滚动你自己，你会看到。
我已经更新了答案中的 plunkr。再次检查，让我知道这是否是你想要的。