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

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>

我无法创建效果，以便在我向下滚动页面时菜单顺利消失。我无法理解这是如何在网站示例中实现的。

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

先感谢您。我很乐意提供任何帮助。

Answer 1

使用css属性transform: translate(0px, 0px)在滚动时使用适当的值进行修改来完成平滑转换。

您可以使用js直接更改元素的样式，而不是附加类。

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate

您可能还需要查看CSS转换。