Headroom.js固定页头(导航条)利器|511遇见强烈推荐

Headroom.js 是什么?

为页面顶部多留些空间。在不需要页头时将其隐藏。

Headroom.js 有什么用?

固定页头(导航条)可以方便用户在各个页面之间切换。但是这也会带来些问题…

大屏幕一般都是宽度大于高度的,也就是说屏幕高度要少一些。固定页头会占用一部分本来可以用于展示内容的区域。小屏幕一般是高度较大,但是别忘了,屏幕本来就小,页头再占用一部分的话,屏幕可用于展示内容的区域当然还是少。

Headroom.js 能帮你把不需要的页面元素在合适的时间展示出来,让用户花更多时间关注你页面上的内容。

Headroom.js工作原理

简单来说,headroom.js 只是为需要响应滚动事件的页面元素增加或删除一个CSS class:

  1. <!-- 初始状态 -->
  2. <header class="headroom">
  3.  
  4. <!-- 向下滚动时 -->
  5. <header class="headroom headroom--unpinned">
  6.  
  7. <!-- 向上滚动时 -->
  8. <header class="headroom headroom--pinned">

通过CSS class的设置,事情变得简单了。所有的控制权就交回到了你的手中,当页面向上或向下滚动时,你就可以通过设置CSS样式来做出自己需要的变化了。

Headroom.js用法

使用 headroom.js 是很简单的。它提供了简单的 JS API,另外,还可以作为 jQuery/Zepto 插件使用。

1 纯JS调用方式
  1. // 获取页面元素
  2. var myElement = document.querySelector("header");
  3. // 创建 Headroom 对象,将页面元素传递进去
  4. var headroom  = new Headroom(myElement);
  5. // 初始化
  6. headroom.init();
2 以 jQuery/Zepto 插件形式调用
  1. // 是不是很简单!
  2. // 注意: init() 默认在插件内部被调用了
  3. $("#header").headroom();
3 插件还提供了一个 data-* API :
  1. <!-- selects $("[data-headroom]") -->
  2. <header data-headroom>

注意:为了兼容,Zepto 的data module 也需要引入。

4 参数

Headroom.js 还能接受一个参数对象,用以改变其行为。你可以看一下 Headroom.js 源码中对 Headroom.options 的定义。其 options 对象的结构如下:

  1. {
  2.     // 在元素没有固定之前,垂直方向的偏移量(以px为单位)
  3.     offset : 0,
  4.     // scroll tolerance in px before state changes
  5.     tolerance : 0,
  6.     // 对于每个状态都可以自定义css classes 
  7.     classes : {
  8.         // 当元素初始化后所设置的class
  9.         initial : "headroom",
  10.         // 向上滚动时设置的class
  11.         pinned : "headroom--pinned",
  12.         // 向下滚动时所设置的class
  13.         unpinned : "headroom--unpinned"
  14.     }
  15. }
5 动态调整 Headroom.js 的参数

容差:"tolerance": 5,
偏移: "offset": 205,
样式: "classes": {
"initial": "animated",
"pinned": "slideDown",
"unpinned": "slideUp"
}
纯 JS 方式:
使用纯 JS 代码,将options对象对位第二个参数传递给构造函数。注意,以这种方式使用Headroom.js 时,options对象不会和默认参数进行合并(也就是说,你必须定义所有参数 )。

  1. var headroom = new Headroom(elem, {
  2.   "tolerance": 5,
  3.   "offset": 205,
  4.   "classes": {
  5.     "initial": "animated",
  6.     "pinned": "slideDown",
  7.     "unpinned": "slideUp"
  8.   }
  9. });
  10. headroom.init();
  11.  
  12. // to destroy
  13. headroom.destroy();

插件方式:
以插件方式使用的话,options对象自动与默认参数对象合并(即使用 $.extend(true, {}, defaultOptions, yourOptions) 方法进行合并)。

  1. $("header").headroom({
  2.   "tolerance": 5,
  3.   "offset": 205,
  4.   "classes": {
  5.     "initial": "animated",
  6.     "pinned": "slideDown",
  7.     "unpinned": "slideUp"
  8.   }
  9. });
  10.  
  11. // to destroy
  12. $("#header").headroom("destroy");

Data API 方式:
如果使用 data-* API 方式,任何参数都需要以 data 属性的形式出现。所有以 data-* API 传递的参数都将与默认参数合并。通过传递 JSON 对象可以改变 headroom.js 默认设置的 CSS class。

  1. <header data-headroom data-tolerance="5" data-offset="205" data-classes='{"initial":"animated","pinned":"slideDown","unpinned":"slideUp"}'></header>
  2.  
  3. // to destroy, in your JS:
  4. $("header").data("headroom").destroy();

百度网盘下载 点击预览


发布日期:

所属分类: JavaScript/jquery, 前端 标签: