Headroom.js 页面滚动动态隐藏工具条 - 文章教程

Headroom.js 页面滚动动态隐藏工具条

发布于 2020-07-05 字数 4623 浏览 1147 评论 0

Headroom.js 是一个轻量级、纯 JS 组件,用来隐藏或展现页面上的元素,为你的页面留下更多展示内容的空间。

Headroom.js 是什么?

Headroom.js 是一个轻量级、高性能的JS小工具(不依赖任何工具库!),它能在页面滚动时做出响应。此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航条消失,当页面向上滚动时,导航条就出现了。

Headroom.js 有什么用?

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

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

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

工作原理

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

<!-- 初始状态 -->
<header class="headroom">

<!-- 向下滚动时 -->
<header class="headroom headroom--unpinned">

<!-- 向上滚动时 -->
<header class="headroom headroom--pinned">

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

用法

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

纯 JS 调用方式

// 获取页面元素
var myElement = document.querySelector("header");
// 创建 Headroom 对象,将页面元素传递进去
var headroom  = new Headroom(myElement);
// 初始化
headroom.init(); 

以 jQuery/Zepto 插件形式调用

// 是不是很简单!
// 注意: init() 默认在插件内部被调用了
$("#header").headroom();

插件还提供了一个 data-* API :

<!-- selects $("[data-headroom]") -->
<header data-headroom>

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

纯 JS 方式

使用纯 JS 代码,将options对象对位第二个参数传递给构造函数。注意,以这种方式使用Headroom.js 时,options对象不会和默认参数进行合并(也就是说,你必须定义所有参数 )。

var headroom = new Headroom(elem, {
  "tolerance": 5,
  "offset": 210,
  "classes": {
    "initial": "animated",
    "pinned": "slideDown",
    "unpinned": "slideUp"
  }
});
headroom.init();

// to destroy
headroom.destroy();

插件方式

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

$("header").headroom({
  "tolerance": 5,
  "offset": 210,
  "classes": {
    "initial": "animated",
    "pinned": "slideDown",
    "unpinned": "slideUp"
  }
});

// to destroy
$("#header").headroom("destroy");

Data API 方式

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

<header data-headroom data-tolerance="5" data-offset="210" data-classes='{"initial":"animated","pinned":"slideDown","unpinned":"slideUp"}'></header>

// to destroy, in your JS:
$("header").data("headroom").destroy();

参数

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

{
    // 在元素没有固定之前,垂直方向的偏移量(以px为单位)
    offset : 0,
    // scroll tolerance in px before state changes
    tolerance : 0,
    // 对于每个状态都可以自定义css classes 
    classes : {
        // 当元素初始化后所设置的class
        initial : "headroom",
        // 向上滚动时设置的class
        pinned : "headroom--pinned",
        // 向下滚动时所设置的class
        unpinned : "headroom--unpinned"
    }
}

案例

headroom.js playroom 页面可以看到更多使用案例。你甚至还可以调整 Headroom.js 的参数来观察不同的效果。

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

时光倒影

文章 0 评论

qq_YyjhCs

文章 0 评论

三人与歌

文章 0 评论

┼──瘾||

文章 1 评论