headroom.js有什么用 headroom.js用法

Headroom.js 是一个轻量级、高机能的JS小器材（不依靠任何器材库！），它能在页面转动时做出相应。此页面顶部的导航条就是一个鲜活的案例，当页面向下转动时，导航条消散，当页面向上转动时，导航条就呈现了。

下载Headroom.js请移步：http://www.veryhuo.com/down/html/82218.html

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 也必要引入。

参数

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 的参数来调查差异的结果。

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!