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

我目前有一个带有标题的页面，该标题包含导航和侧边“导航”，其中包含关于该页面的额外详细信息

以前，标题与内容一起滚动，但为了使导航更易于使用，现在已修复。但是，由于页眉是固定的，因此侧边导航会在页面标题下滚动，而不是保持不变。参见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>

我已经对我在JSFIDLE上的意思进行了模拟：

---

编辑：正如评论中提到的，侧面导航的高度不同，可能是500px高，或者是2000px高，在这种情况下，它将不在屏幕上。

我想侧面导航本身可以滚动，但不太理想，因为侧边导航的高度根据您所在页面的不同而有所不同，所以我无法确定它的高度。它没有固定的高度-它应该和您的页面一样高，任何溢出的内容都会滚动-如果没有那么多内容，那么它就没有滚动条。我不说它将是页面的高度确定它的高度？我想我可以有一个没有背景的div，这样你就看不出它在那里，然后把“侧导航”放在里面。这不是真的，因为页面可以是任何高度-固定高度将是一个像素量，但是的，你的解决方法可以是滚动div中的div-