css - 带有粘性列的画布外布局

Question

我正在处理的布局是一种非画布类型的布局，其中部分信息在需要时转换为视图，在智能手机等较小的屏幕上非常流行。我的代码基于此博客文章中的示例。问题是将不在画布上的容器保持在固定位置，而主容器可以垂直滚动。为了说明问题，我创建了一个快速Codepen 示例。

<div class="container">
  <div class="transformer">
  <div class="off-canvas">
     Content off canvas goes here
  </div>
  <div class="main">
     Main content
  </div>
 </div>
</div>

非常感谢任何指向此解决方案的指针。

使用的 CSS 框架是Susy。