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

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 转换。