用 原生Javascript 创建带动画的固顶导航菜单
JavaScript
吃颗糖
1人收藏 408次学习

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

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

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

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

固顶导航菜单:基本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>

 

添加一点样式

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

  • 主容器

我们需要移除浏览器的默认样式并设置主容器的 width 为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 变量开始。在页面加载的时它会被设置为 window.scrollY 的值 —— 当前页面垂直滚动的像素个数(初始为 0)。当用户滚动时,newOffset 会相应的增加或减少。如果 newOffset 大于 bannerHeight ,这时我们就知道菜单已经滚动到视图外了。

const newOffset = window.scrollY;

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

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

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
}
  • 菜单动画

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

if (newOffset > bannerHeight) {
  if (newOffset > refOffset) {
    animateOut();
  } else {
    animateIn();
  }

  refOffset = newOffset;
} else {
  banner.style.backgroundColor = 'rgba(162, 197, 35, 1)';
}

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

function animateOut() {
  bannerWrapper.style.msTransform = `translateY(-${bannerHeight}px)`;
  bannerWrapper.style.transform = `translateY(-${bannerHeight}px)`;
  bannerWrapper.style.webkitTransform = `translateY(-${bannerHeight}px)`;
  bannerWrapper.style.MozTransform = `translateY(-${bannerHeight}px)`;
  banner.style.background = 'rgba(162, 197, 35, 0.6)';
}

function animateIn() {
  bannerWrapper.style.transform = 'translateY(0px)';
  bannerWrapper.style.msTransform = 'translateY(0px)';
  bannerWrapper.style.webkitTransform = 'translateY(0px)';
  bannerWrapper.style.MozTransform = 'translateY(0px)';
  banner.style.background = 'rgba(162, 197, 35, 0.6)';
}

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

演示

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

Create an Animated Sticky Navigation Menu with Vanilla JavaScript

总结

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

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

加入1KE学习俱乐部

1KE学习俱乐部是只针对1KE学员开放的私人俱乐部
标签:
JavaScript 前端