首页 > 代码库 > 页面滚动显示或隐藏元素Headroom.js插件帮助你实现滚动效果
页面滚动显示或隐藏元素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)