Александр Мельниченко

Ну все анимации на js на это принципе построены. Так что думаю это оптимальный вариант

У тебя верхний и нижний блоки позиционированы фиксировано, следовательно они вынесены на слой выше основного контента(игнорируются основным контентом). Сделай отступы сверху и снизу

#text-block {
  font-size: 2em;
  overflow: scroll;
  margin:3em 0; /*отступ сверху и снизу в 3 строки*/
}

Блок с позиционирование absolute позоционируется относительно ближайшего родителя с позиционированием relative.
Оберни эту вся лабуду в блок с position:relative

<div style="position:relative">
<nav>
  <h5>Nav</h5>
  <button>Exit</button>
</nav>
<aside> 
  <h5>Sidebar</h5>
  <button>Exit</button>
</aside>
<main>...</main></div>