固定元素离开页面但可以向下滚动

Question

我目前有一个带标题的页面，该标题包含导航和侧面导航＆＃39;其中包含有关页面的额外详细信息。

以前标题会滚动内容，但为了使导航更容易使用，现在修复了它。但是，由于标题是固定的，侧面导航会在页面标题下滚动而不是保留在原位（请参阅gif）。

是否有任何方法可以让侧面导航保持固定在标题上但不会离开页面末尾？我尝试了几种方法，包括将它放在导航div本身内。这可以防止它隐藏在页眉后面，但是当导航被修复时，页面不会展开以显示侧导航的完整高度。

当前的HTML结构：

<div id="page-title">
   This is the dark blue bit in the gif
</div>
<div id="nav">
   This is navigation
</div>
<div id="content">
   <div class="col-3" style="top: -30px;">
       This is where the page detail goes
   </div>
   <div class="col-9">
       This is where the content of the page goes
   </div>
</div>

我在jsfiddle上模仿了我的意思：http://jsfiddle.net/khycg3ru/6/

编辑：正如评论中提到的那样＆＃34;侧面导航＆＃34;高度不同，可以说是500px高，或2000px，在这种情况下，它会离开屏幕。