固定垂直放置的相同尺寸的柱子

Question

我有100％宽度和高度的背景图片作为主页，下面有100％宽的子页面，高度不同。

每个子页面都有两列 - 左边一列是100％高度固定图像，右边一列是内容。滚动内容不会移动图像，直到我开始移动到它下面的另一个子页面。

我希望你明白我的意思，据我所知，它是非常常见的网页设计。

问题在于我无法使其正常工作 - 固定列始终位于整个网站的顶部，我无法将它们放在另一个网站之下。

我怎么能这样做？

<div class="row">
     <div class="col-xs-8" style="background-color: #a9a8a8; min-height: 100%;">Content goes here...</div>
     <div class="col-xs-3 col-xs-offset-1" style="position: relative;">
           <div class="col-xs-3" style="position: fixed; top: 0; height: 100%;">
                 <img src="/assets/image/fixedImage.png">
           </div>
     </div>
 </div>

这是小提琴：https://jsfiddle.net/eL12rydd/
这就是我想要获得更多或更少的效果（向下滚动）：http://ostro.tv