The layout I'm working on is an off-canvas type layout where part of the information is transitioned into view when needed, very popular on smaller screens as smartphones. My code is based on the example from this blog post. The problem is to keep the container that is off-canvas at a fixed position while the main container can be scrollable vertically. In order to illustrate the problem I have created a quick Codepen example.
<div class="container">
<div class="transformer">
<div class="off-canvas">
Content off canvas goes here
</div>
<div class="main">
Main content
</div>
</div>
</div>
Would greatly appreciate any pointers to a solution for this.
The CSS framework in use is Susy.
