时间戳

首页 > 解决方案 > 如何创建具有这种效果的菜单？

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

问题描述

试图创建一个具有这种效果的菜单。

我的代码 

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>

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

告诉我如何正确地为菜单实现这个效果。

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

标签： javascripthtmlcssmenueffects

解决方案

平滑翻译是使用transform: translate(0px, 0px)在滚动时使用适当值修改的 css 属性完成的。

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

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

您可能还想研究 CSS 过渡。

推荐阅读