Html 垂直放置的相同大小的固定列

我有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>

内容在这里。。。

这是小提琴：

---

这就是我或多或少想要得到的效果（向下滚动）：

你能不能把你的问题处理一下？你的代码中缺少一些结束div。请使用语法正确的代码重试并编辑您的帖子。如果你能用2个空格的缩进来提高可读性，那就太好了。当然，我编辑了这个问题。