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です。