插件描述：Headroom.js是一个轻量级高性能的JS插件 ，响应用户鼠标滚动操作。弹出或隐藏顶部导航菜单。
Headroom.js是一个轻量级高性能的JS插件 ，响应用户鼠标滚动操作。弹出或隐藏顶部导航菜单。
使用步骤
它是如何工作的？
在它的最基本的headroom.js简单地添加和删除CSS类从以响应滚动事件的元素：
1 2 3 4 5 6 | < - ！开始 - ><header class="headroom">< - ！向下滚动 - ><header class="headroom headroom--unpinned">< - 向上滚动 - ><header class="headroom headroom--pinned"> |
用法
使用headroom.js是非常简单的。它有一个纯JS API，以及可选的jQuery /的Zepto兼容和AngularJS插件。
用纯JS
1 2 3 4 5 6 | // grab an elementvar myElement = document.querySelector("header");// construct an instance of Headroom, passing the elementvar headroom = new Headroom(myElement);// initialiseheadroom.init(); |
使用jQuery /的Zepto
1 2 3 4 5 6 7 | // 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
1 2 3 4 5 | <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看到默认的选项。是选择对象的结构如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | { // 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效果。
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jquery焦点图手风琴效果
- 下一个特效： 跳房子