当前位置:首页>>网站制作>>JS教程>>正文

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

2017-06-19T10:14:41 来源:设计前沿收集 作者:Javascript

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

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

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

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

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

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

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

添加一点样式

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

主容器

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

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

横幅容器

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

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

横幅部分

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

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

内容部分

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

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

让菜单动起来

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

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

设置一些初始变量

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

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

确定滚动方向

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

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

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

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

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

菜单动画

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

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

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

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

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

演示

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

Create an Animated Sticky Navigation Menu with Vanilla JavaScript

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

总结

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