我发现了一个很棒的自动隐藏导航栏。

导航栏演示（或参考本站）：

https://codepen.io/Mhmdhasan/pen/mAdaQE

导航栏脚本：

$(document).ready(function () {
  'use strict';
   var c, currentScrollTop = 0,
       navbar = $('nav');
   $(window).scroll(function () {
      var a = $(window).scrollTop();
      var b = navbar.height();
      currentScrollTop = a;
      if (c < currentScrollTop && a > b + b) {
        navbar.addClass("scrollUp");
      } else if (c > currentScrollTop && !(a <= b)) {
        navbar.removeClass("scrollUp");
      }
      c = currentScrollTop;
  });
});

最后添加css样式：

.scrollUp {
    transform: translateY(-80px);
}

使用es6原生方式加载css，效率更高

// 获取header元素
const header = document.querySelector('header');
let prevScrollPos = window.pageYOffset;
// 监听滚动事件
window.addEventListener('scroll', () => {
  const currentScrollPos = window.pageYOffset;
  // 判断滚动方向
  if (prevScrollPos < currentScrollPos) {
    // 向上滚动，显示header
    header.classList.add('scrollUp');
  } else {
    // 向下滚动，隐藏header
    header.classList.remove('scrollUp');
  }
  prevScrollPos = currentScrollPos;
});

结束