在页面滚动时隐藏或展现页面元素的JS插件Headroom.js

简介

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

使用

1.  引入 headroom.js和jQuery.headroom.js 文件

2.  HTML

<!-- 初始状态 -->
<header class="headroom">
<!-- 向下滚动时 -->
<header class="headroom headroom--unpinned">
<!-- 向上滚动时 -->
<header class="headroom headroom--pinned">

3. 调用

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

相关链接

官网地址 ：https://wicky.nillia.ms/headroom.js/

github 地址 ：https://github.com/WickyNilliams/headroom.js