Javascript 如何重新创建Facebook图像模式？

我想创建一个几乎完全类似于Facebook图像模式的东西，当用户滚动评论时，图像是固定的。我正在处理将

溢出：隐藏
应用到一个div和
溢出：滚动到另一个div的不同方法。我甚至考虑把它应用到他们的父母身上。以下是我尝试过的代码：

<div class="row container border border-primary">
  <div class="image col border">
    Image
  </div>
  <div class="text-section col border">
    Comments
  </div>
</div>

div.image {
  height: 300px;
  overflow: hidden;
}

div.text-section {
  height: 1000px;
  overflow: scroll;
}

div.container {
  height: 300px;
}


形象
评论
部门形象{
高度：300px；
溢出：隐藏；
}
div.text-section{
高度：1000px；
溢出：滚动；
}
分区集装箱{
高度：300px；
}

我没有facebook，所以无法查看行为，但你可以把
放在位置：sticky，这将使其保持原位。这也取决于你的浏览器支持，比如ie11，但是有更多的方法可以做到这一点。如果您需要更跨浏览器的解决方案，请告诉我


.container{
最大高度：600px；
身高：100%；
溢出：自动；
位置：相对位置；
}
部门形象{
高度：300px；
背景颜色：深蓝；
位置：粘性；
排名：0；
}
div.text-section{
高度：1000px；
背景色：浅绿色；
}

形象
评论
我以为是这样的代码。左侧的蓝色（图像）保持不变，而您可以滚动右侧的绿色部分（注释）



#容器{背景：红色；宽度：400px；高度：150px；显示：flex；}
#图像{背景：url（“https://i1.adis.ws/i/canon/canon-pro-best-landscape-lenses-1-1140?w=200&aspect=4:3&qlt=70&sm=aspect&fmt=jpg&fmt.options=interlaced&fmt=jpg&fmt.options=interlaced&bg=rgb（255255）”；宽度：200px；高度：150px；}
#注释{背景：#eee；宽度：200px；溢出：滚动；填充：0 10px 20px 10px；字体系列：Verdana；颜色：黑色；}
评论
很好

好!

好极了

呸

奇怪的

又好了

惊人的

美丽的

伟大的

我不喜欢它

是的，很好

超级

正常的

好的

好的

呸

伟大的

好的

我喜欢

正常的

你能举个例子说明你到底想要什么吗？非常感谢！这工作令人惊讶！我可能不得不看看我的代码中的其他复杂之处，看看为什么我的代码不起作用。