页面滚动显示或隐藏元素Headroom.js插件帮助你实现滚动效果

Headroom.js 是什么？

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

Headroom.js 有什么用？

固定页头（导航条）可以方便用户在各个页面之间切换。但是这也会带来些问题…本文原创博客地址：http://www.cnblogs.com/unofficial官网地址：www.pushself.com)

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

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"

    }

}

下载地址：

https://raw.githubusercontent.com/WickyNilliams/headroom.js/master/dist/headroom.js

本文原创博客地址：http://www.cnblogs.com/unofficial官网地址：www.pushself.com)