vanilla_使用Vanilla JavaScript创建动画即时导航菜单

vanilla

在网页上添加导航菜单时，需要考虑很多因素。 例如，在哪里放置它，如何设置其样式，如何使其具有响应性。 或者，也许您想向其中添加某种动画（当然是高雅的）。 在这一点上，您可能很想抓住一个jQuery插件来为您完成大部分任务。 但这不是必须的！ 用几行代码创建自己的解决方案实际上很简单。

在本文中，我将演示如何使用原始JavaScript，CSS和HTML创建动画的，粘性的导航菜单。 向下滚动页面时，最终产品将向上滑动，然后向后滚动时，将其滑回视图（具有时尚的透视效果）。 这是诸如Medium和Hacker Noon这样的流行网站所使用的技术。

阅读后，您将可以在自己的设计中使用此技术，希望能发挥很大的作用。 本文结尾处有一个针对不耐烦的演示 。

粘性导航菜单：基本HTML结构

以下是我们将使用的基本HTML代码。 这里没有什么太令人兴奋的事情。

<div class="container">
  <div class="banner-wrapper">
    <div class="banner">
      <div class="top">
        <!-- Navbar top row-->
      </div>
      <div class="nav">
        <!-- Links for navigation-->
      </div>
    </div>
  </div>

  <div class="content">
    <!-- Awesome content here -->
  </div>
</div>

套用一点样式

让我们为主要元素添加一些样式。

主箱

我们需要删除所有固有的浏览器样式，并将容器的宽度设置为100％。

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

.container{
  width: 100%;
}

横幅容器

这是导航菜单的包装。 它始终是粘性的，在垂直滚动页面时会滑动以隐藏或显示导航菜单。 我们给它一个z-index值，以确保它出现在内容的顶部。

.banner-wrapper {
  z-index: 4;
  transition: all 300ms ease-in-out;
  position: fixed;
  width: 100%;
}

横幅部分

这包含导航菜单。 当页面向上或向下滚动时，位置和背景颜色的变化会通过CSS transition属性进行动画处理。

.banner {
  height: 77px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background: rgba(162, 197, 35, 1);
  transition: all 300ms ease-in-out;
}

内容部分

本节将包含背景图片和文字。 我们将在本文的后面部分中向页面的此部分添加视差效果。

.content {
  background: url(https://unsplash.it/1400/1400?image=699) center no-repeat;
  background-size: cover;
  padding-top: 100%;
}

动画菜单

我们需要做的第一件事是将事件处理程序附加到滚动事件，以便我们可以在用户滚动时相应地显示和隐藏菜单。 我们还将所有内容都封装在IIFE中 ，以避免与同一页面上运行的其他代码冲突。

(() => {
  'use strict';

  const handler = () => {
    //DOM manipulation code here
  };

  window.addEventListener('scroll', handler, false);
})();

设置一些初始值

我们将使用refOffset变量来表示用户向下滚动页面的距离。 在页面加载时将其初始化为0 。 我们将使用bannerHeight变量来存储菜单的高度，并且还需要引用.banner-wrapper和.banner DOM元素。

let refOffset = 0;
let visible = true;
const bannerHeight = 77;

const bannerWrapper = document.querySelector('.banner-wrapper');
const banner = document.querySelector('.banner');

建立滚动方向

接下来，我们需要建立滚动方向，以便可以相应地显示或隐藏菜单。

我们将从一个名为newOffset的变量newOffset 。 在页面加载时，该值将设置为window.scrollY的值—当前垂直滚动文档的像素数（最初为0 ）。 当用户滚动时， newOffset将相应地增加或减少。 如果它大于存储在bannerHeight的值，那么我们知道菜单已经滚动到视图之外。

const newOffset = window.scrollY;

if (newOffset > bannerHeight) {
  // Menu out of view
} else {
  // Menu in view
}

向下滚动将使newOffset大于refOffset ，导航菜单应向上滑动并消失。 向上滚动将使newOffset小于refOffset ，并且导航菜单应滑回视图并具有透视效果。 执行此比较之后，我们需要更新refOffset与价值newOffset跟踪多远用户滚动。

if (newOffset > bannerHeight) {
  // Menu out of view
  if(newOffset > refOffset) {
    // Hide the menu
  } else if (newOffset < refOffset) {
    // Slide menu back down
  }

  refOffset = newOffset;
} else {
  // Menu in view
}

动画菜单

最后，让我们添加一些动画来显示和隐藏菜单。 我们可以使用以下CSS来做到这一点：

.animateIn{
  transform: translateY(0px);
}

.animateOut{
  transform: translateY(-100%);
}

一旦到达页面顶部，我们还应确保从菜单中删除透视效果。

if (newOffset > bannerHeight) {
  if (newOffset > refOffset) {
    bannerWrapper.classList.remove('animateIn');
    bannerWrapper.classList.add('animateOut');
  } else {
    bannerWrapper.classList.remove('animateOut');
    bannerWrapper.classList.add('animateIn');
  }
  banner.style.background = 'rgba(162, 197, 35, 0.6)';
  refOffset = newOffset;
} else {
  banner.style.backgroundColor = 'rgba(162, 197, 35, 1)';
}

如您所见，我们将相应地删除/应用不同CSS类。

演示版

这是工作菜单的演示。

请参阅CodePen上的SitePoint（ @SitePoint ）提供的Pen ZKJVdw 。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

结论

本文介绍了如何仅使用原始JavaScript即可在几行代码中设计动画导航菜单，而无需jQuery。 当您向下滚动时，菜单滑动消失，而当您向上滚动时，菜单滑动回到具有透明效果的视图。 这是通过监视垂直滚动方向并根据需要将CSS转换应用于DOM元素来完成的。 这样的定制解决方案为您提供了更多自由，可根据您自己的要求和规格轻松灵活地进行设计。

是否想提高您JavaScript技能？ 查看我们的课程JavaScript和
JavaScript：后续步骤 。

本文由Vildan Softic同行评审。 感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态！

翻译自: https://www.sitepoint.com/animated-sticky-navigation-menu-javascript/

vanilla