javascript - 仅在滚动时显示页眉和页脚

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>

这里有一张图片来展示我的布局是如何构建的（黑色区域：页眉和页脚）。

标签： javascriptjqueryscroll