如何创建具有这种效果的菜单？

Question

尝试使用-this effect 创建菜单。

我的代码

var lastScroll = 0;

    window.onscroll = function() {
      var navbar = document.querySelector('.navbar');
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      var body = document.querySelector('body');

      if (lastScroll - scrollTop > 0) {
        body.classList.add('body-fixed');
        navbar.classList.add('fixed');
      } else {
        body.classList.remove('body-fixed');
        navbar.classList.remove('fixed');
      }

      lastScroll = scrollTop;

    }

var lastScroll = 0;

window.onscroll = function() {
  var navbar = document.querySelector('.navbar');
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  var body = document.querySelector('body');

  if (lastScroll - scrollTop > 0) {
    body.classList.add('body-fixed');
    navbar.classList.add('fixed');
  } else {
    body.classList.remove('body-fixed');
    navbar.classList.remove('fixed');
  }

  lastScroll = scrollTop;

}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 2000px;
}
body.body-fixed{
  padding-top: 60px;
}

.navbar {
  padding-top: 40px;
  padding-bottom: 40px;
  background: #00f;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  transition: padding 0.3s ease;
}

.navbar.fixed {
  position: fixed;
  padding-top: 30px;
  padding-bottom: 30px;
}

<nav class="navbar"></nav>

我无法创建效果，所以当我向下滚动页面时菜单不会平滑消失。我不明白在网站示例中该如何实现。

告诉我如何正确实现菜单的效果。

先谢谢您。我将很高兴为您提供帮助。