用原生Javascript 创建带动画的固定导航菜单

当我们在网页中加入一个导航菜单的时候，需要考虑很多因素。如何确定它的位置？如何定义样式？还需要保证它具有良好的响应性。又或者你想为它添加一些炫酷的动画。这时你可能会对 jQuery 感兴趣，因为它会帮你做大部分的事情。但并不必这样！事实上只用几行代码就可以解决这件事情。

在这篇文章中，我会向你们展示如何用 原生Javascript ，CSS 和 HTML 去创建一个带动画的固顶导航菜单。最后它会在页面向下滚动时上滑隐藏起来，页面向上滚动时下滑回到页面上(以一种时髦的透明效果)。许多流行的网站采用了这种技术，例如Medium和Hacker Noon。

相信阅读完你就会在你的设计中尝试了，希望能有很好的效果。如果你等不及可以直接看文章末尾的 demo

固顶导航菜单：基本HTML结构

下面是我们将要使用的 HTML 骨架，很普通的代码。

添加一点样式

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

主容器

我们需要移除浏览器的默认样式并设置主容器的 width 为100%。

横幅容器

它包裹在导航菜单的外面，位置是固定的，当页面垂直滚动时会上滑隐藏或下滑展现导航菜单。我们给它添加一个 z-index 属性来保证它会展现在页面的最顶层。

横幅部分

它包含导航菜单。当页面上下滚动时，CSS 的 transition 属性会让位置和背景颜色的改变带有动画效果。

内容部分

这部分包含背景图片和文本。我们会在文章的后面部分为它添加视差效果。

让菜单动起来

我们要做的第一件事是给滚动事件添加一个事件处理器，以便在用户滚动页面的时候相应的展示或隐藏菜单。我们把所有代码用即时执行函数 IIFE 封装起来以免与同一页面的其他代码发生冲突。

设置一些初始变量

refOffset 表示用户向下滚动页面的距离。这个值会在页面加载时初始化为 0。bannerHeight 来储存菜单的高度。同样我们需要 .banner-wrapper 和 .banner 两个DOM元素的引用。

确定滚动方向

接下来我们需要确定滚动的方向以便我们能相应的展示和隐藏菜单。

我们以 newOffset 变量开始。在页面加载的时它会被设置为 window.scrollY 的值 —— 当前页面垂直滚动的像素个数(初始为 0)。当用户滚动时，newOffset 会相应的增加或减少。如果 newOffset 大于 bannerHeight ，这时我们就知道菜单已经滚动到视图外了。

向下滚动会使 newOffset 大于 refOffset ，导航菜单应该上滑隐藏。向上滚动会使 newOffset 小于 refOffset ，导航菜单应该以透明效果滑回视图。所以我们需要不断通过 newOffset 来更新 refOffset ，来保持对用户滚动的距离的追踪。

菜单动画

最后，添加 animateIn 和 animateOut 两个方法，分别用来展示和隐藏菜单。我们也应该保证当菜单位于页面顶部的时候移除它的透明效果。

下面是动画效果的函数代码

你可能考虑使用 CSS 的 class 来达到同样的效果，你可以修改相应的代码来实现。在本篇文章中，我选择了使用 JavaScript。

演示

这里是导航菜单的演示效果:

http://codepen.io/SitePoint/pen/ZKJVdw/

总结

本文描述了如何仅仅用几行原生 JavaScript 代码(不需要 jQuery)来设计一个带动画的导航菜单。菜单会在页面向下滚动时上滑隐藏，页面向上滚动时下滑回视图并带有透明效果。通过监听垂直方向的滚动并改变 DOM 元素相应的 CSS 属性来实现功能。这样的定制化解决方案会给你更大的自由空间，让你可以根据自己的需求灵活的进行设计。

原文: Create an Animated Sticky Navigation Menu with Vanilla JavaScript

作者: Albert Senghor

译者: codearvin