Показывать только верхний и нижний колонтитул только при прокрутке

Question

Я хочу показывать свой верхний и нижний колонтитулы только при прокрутке.

Исходя из своего кода, я могу отлично отображать верхний колонтитул при прокрутке вверх, но если прокручивать вниз, верхний колонтитул скользит вверх, а нижний колонтитул опускается вниз.

Это должно работать следующим образом:

1. Показать только тег раздела
2. Прокрутить вверх => Показать заголовок
3. Прокрутить вниз => Скрыть заголовок иперейти к содержанию
4. Прокрутить вниз (снова после показа содержимого) => Показать нижний колонтитул
5. Прокрутить вверх (после показа нижнего колонтитула) => Показать содержимое

var lastScrollTop = 0;
$(window).on('scroll', function () {
  var st = $(this).scrollTop();
  if (st > lastScrollTop) {
    header.slideUp();
    footer.slideDown();
  }
  else {
    header.slideDown();
    footer.slideUp();
  }
});

<header>
  ...
</header>
<section>
  ...
</seciton>
<footer>
  ...
</footer>

Вот изображение, показывающее, как построен мой макет (черные области: верхний и нижний колонтитулы).