滚动事件

Headroom.js是一个轻量级高性能的JS插件 ，响应用户鼠标滚动操作。弹出或隐藏顶部导航菜单。

使用步骤

它是如何工作的？

在它的最基本的headroom.js简单地添加和删除CSS类从以响应滚动事件的元素：

< - ！开始 - >
<header class="headroom">
< - ！向下滚动 - >
<header class="headroom headroom--unpinned">
< - 向上滚动 - >
<header class="headroom headroom--pinned">

用法

使用headroom.js是非常简单的。它有一个纯JS API，以及可选的jQuery /的Zepto兼容和AngularJS插件。

用纯JS

// grab an element
var myElement = document.querySelector("header");
// construct an instance of Headroom, passing the element
var headroom  = new Headroom(myElement);
// initialise
headroom.init();

使用jQuery /的Zepto

// simple as this!
// NOTE: init() is implicitly called with the plugin
$("header").headroom();
The plugin also offers a data-* API if you prefer a declarative approach.

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

注：的Zepto的附加数据模块所需的兼容性。

随着AngularJS

<header headroom></header>
<!-- or -->
<headroom></headroom>
<!-- or with options -->
<headroom tolerance='0' offset='0' classes="{pinned:'headroom--pinned',unpinned:'headroom--unpinned',initial:'headroom'}"></headroom>

选项

Headroom.js还可以接受的选择对象来改变它的行为方式。您可以通过检查Headroom.options看到默认的选项。是选择对象的结构如下：

{
    // vertical offset in px before element is first unpinned
    offset : 0,
    // scroll tolerance in px before state changes
    tolerance : 0,
    // css classes to apply
    classes : {
        // when element is initialised
        initial : "headroom",
        // when scrolling up
        pinned : "headroom--pinned",
        // when scrolling down
        unpinned : "headroom--unpinned"
    }
}

示例

如果你想看到一些示例用法头部到headroom.js游戏室。在那里，您可以调整所有的高度的选择和运用交互式演示不同的CSS效果。

PREVIOUS:
NEXT:
跳房子
jquery焦点图手风琴效果