Headroom.js小插件轻松实现导航动态显示隐藏

绝大多数网站都会有个顶部导航,对于手机端而言为了便于访问导航常常会做固顶操作,为了提高用户体验可以通过Headroom.js可以轻松实现下滑隐藏,上滑显示的效果,比较适合新手使用

Headroom.js小插件轻松实现导航动态显示隐藏

所属分类: WEB
专题标签: 导航栏 隐藏 CSS

动态导航诉求说明

由于手机屏幕尺寸的问题,网站为了提升用户体验,往往会将导航栏固顶以便于用户快速访问到网站的关键位置。
这样做会带来一个问题是手机本身高度就较少,增加一个导航栏后上下能够展示的区域自然会变得少。
虽然手机端而言屏幕的高度确实大于宽度,但是手机端屏幕本身尺寸较小,导航占用一部分,用于展示的区域一样变少。
有一款轻量级、高性能的JS小工具(不依赖任何工具库),它能在页面滚动时做出响应。
Headroom.js 使得我们只需要极少的代码就能完成这项诉求。

实现原理

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

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

Headroom调用方式

Headroom.js提供了多种调用方式,为了更能够浅显易懂的使用工具,米虫提供一个最简的Demo以便于理解。
米虫比较偷懒,直接用的Jquery的写法。

  1. <!DOCTYPE html>
  2. <html lang="zh_CN">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>Headroom.js轻松实现导航动态显示隐藏DEMO - 米虫博客</title>
  8. <meta name="keywords" content="米虫,前端,DEMO">
  9. <meta name="description" content="Headroom.js轻松实现导航动态显示隐藏的DEMO">
  10. </head>
  11. <body>
  12. <style>
  13. /*导航的原始固顶样式*/
  14. .header
  15. {
  16. position: fixed;
  17. text-align: center;
  18. width: 100%;
  19. height: 50px;
  20. background: #333;
  21. color: #fff;
  22. line-height: 50px;
  23. font-size: 24px;
  24. }
  25. /*导航常规CSS*/
  26. .headroom
  27. {
  28. top: 0px;
  29. /*延时*/
  30. transition: all 1s;
  31. }
  32. /*导航下滚CSS*/
  33. .headroom--unpinned
  34. {
  35. top: -100px;
  36. }
  37. /*导航上滚CSS*/
  38. .headroom--pinned
  39. {
  40. top: 0px;
  41. }
  42. .body
  43. {
  44. padding: 100% 40px;
  45. text-align: center;
  46. background: #eee;
  47. }
  48. </style>
  49. <div id="header" class="header headroom">
  50. 顶部导航
  51. </div>
  52. <div class="body">
  53. 为了便于展示,正文区域可以设计高一些,可以上下拖动测试
  54. </div>
  55. <!-- 加载Jquery -->
  56. <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  57. <!-- 加载Headroom -->
  58. <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>
  59. <!-- 初始化头部 -->
  60. <script>
  61. $("#header").headroom();
  62. </script>
  63. </body>
  64. </html>

Headroom自定义Class名

米虫这里直接采用了工具默认的样式Class名,如果需要自定义Class名,可以通过官方文档查看其初始化方式!
http://www.bootcss.com/p/headroom.js/