固定页眉和带有固定页脚的固定sidenav，侧面nav与页脚合拢

Question

页眉的位置是固定的，并且侧面导航应该随着滚动向上和向下移动，因此我为侧面导航应用了固定的位置，我现在面临的问题是其与页脚的折叠。

<div class="header" style="background: #555;color: #f1f1f1;position:fixed;" id="myHeader">
    <h2>I am header you can change my coding but my position should be fixed</h2>
</div>

<div class="content">
    <div style="height:1400px"></div>
    <div style="width: 200px; background-color: #999; position: fixed; right: 20px; top: 200px; height: 383px;">
        <h3>I should move with scroll but should not collapse with footer</h3>
    </div>
    <div style="width: 1800px; background-color: #996; right: 20px; top: 300px; height: 383px;">
        <h2>I am footer</h2>
    </div>

</div>