📖Jquery+CSS轻松实现导航动态显示隐藏

发布： 2017-06-23

热度： 48

趋势： 48

权重： 0

分类： 前端开发

标签： JS  CSS  悬浮

🎯

绝大多数网站都会有个顶部导航，对于手机端而言为了便于访问导航常常会做固顶操作，通过CSS样式配合Jquery的scroll()方法或原生JS监听滑动事件方法，可以轻松实现下滑隐藏，上滑显示的效果

导航动态显示隐藏

实现页面下滑时，固顶导航自动上滑隐藏。

实现页面上滑时，固定导航自动下拉显示。

需求的核心点在于判断页面当前为下滑还是上滑。

此外导航的显示与隐藏不能太过于突兀，采用平滑的动画效果更好。

CSS 代码

/*动画样式*/
/*当元素产生变化时，0.6S内完成此变化*/
* { 
  -webkit-transition: all.6s; 
  -moz-transition: all.6s; 
  -ms-transition: all.6s; 
  -o-transition: all.6s;
  /*上面四条为了兼容各个内核的浏览器，实际仅需下方一条样式*/
  transition: all.6s;
}
/*固顶导航样式*/
/*这个样式在Headroom.js小插件一文中也用到了*/
header {
  height: 60px;
  width: 100 % ;
  background: #2c4762;
  position: fixed;
  /*顶部距离*/
  top: 0;
}
/*下滑触发追加的CSS*/
/*追加此样式时，导航在0.6S时间内从顶部上滑至-60px负距离*/
.down {
  /*顶部负距离，一般和导航高度一致*/
  top: -60px;
}

JS 代码

$(function() {
  //记录顶部距离
  var windowTop = 0;
  //触发页面滑动时会进入此方法
  $(window).scroll(function() {
    //获取当前可视区域距离页面顶端的距离
    var scrolls = $(this).scrollTop();
    //当scrolls>windowTop时，表示页面在向下滑动
    if (scrolls >= windowTop) {
      //追加样式并记录新的距离
      $("#header").addClass("down");
      windowTop = scrolls;
    } else {
      $("#header").removeClass("down");
      windowTop = scrolls;
    }
  });
});

Headroom.js 小插件

有一款轻量级、高性能的 JS 小工具（不依赖任何工具库），它能在页面滚动时做出响应。

Headroom.js 使得我们只需要极少的代码就能完成这项诉求。

其实现思路和本文描述的一致。

实现原理

响应滚动事件的页面元素增加或删除一个 CSS class，已达到导航栏的显示和隐藏。

<!-- 这三种状态均由headroom.js进行完成 -->
<!-- 初始状态 -->
<header class="headroom">
<!-- 向下滚动时 -->
<header class="headroom headroom--unpinned">
<!-- 向上滚动时 -->
<header class="headroom headroom--pinned">

Headroom 调用方式

Headroom.js 提供了多种调用方式，为了更能够浅显易懂的使用工具，米虫提供一个最简的 Demo 以便于理解。

米虫比较偷懒，直接用的 Jquery 的写法。

<!DOCTYPE html>
<html lang="zh_CN">
  
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Headroom.js轻松实现导航动态显示隐藏DEMO - 米虫博客</title>
    <meta name="keywords" content="米虫,前端,DEMO">
    <meta name="description" content="Headroom.js轻松实现导航动态显示隐藏的DEMO"></head>
  
  <body>
    <style>
    /*导航的原始固顶样式*/ 
    .header { 
      position: fixed; 
      text-align: center; 
      width: 100%;
      height: 50px; 
      background: #333; 
      color: #fff; 
      line-height: 50px; 
      font-size: 24px;
    } 
    /*导航常规CSS*/ 
    .headroom { top: 0px; /*延时*/ transition: all 1s; } 
    /*导航下滚CSS*/ 
    .headroom--unpinned { top: -100px; } 
    /*导航上滚CSS*/ 
    .headroom--pinned { top: 0px; } 
    .body { padding: 100% 40px; text-align: center; background: #eee; }
    </style>
    <div id="header" class="header headroom">顶部导航</div>
    <div class="body">为了便于展示，正文区域可以设计高一些，可以上下拖动测试</div>
    <!-- 加载Jquery -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <!-- 加载Headroom -->
    <script src="https://cdn.bootcss.com/headroom/0.9.4/headroom.min.js"></script>
    <script src="https://cdn.bootcss.com/headroom/0.9.4/jQuery.headroom.min.js"></script>
    <!-- 初始化头部 -->
    <script>$("#header").headroom();</script>
  </body>
</html>