让网页菜单上拉出现下拉消失——简单有趣的headroom.js

Posted on In

Headroom.js 是一个轻量级、高性能的JS小工具,通过在指定的div class中加上"headroom"，"headroom headroom--unpinned","headroom headroom--pinned"来使用户能够方便地基于网页上下滚动控制菜单样式。

使用时，只需在网页中引用js库（jquery版需要同时引用 jQuery.headroom.min.js 与 headroom.min.js）,将事件绑定在元素上

1
$("#header").headroom();

或者

1
2
3
4
5
var myElement = document.querySelector("header");

var headroom  = new Headroom(myElement);

headroom.init();

即可方便使用。

成功使用时，可以在调试台看到页面上下滚动时设置的元素的class也同时在变化。由class的变化可以在css中添加样式与动画，达到想要的效果。例如 

1
2
3
4
5
6
7
8
9
10
.headroom {
    will-change: transform;
    transition: transform 200ms linear;
}
.headroom--pinned {
    transform: translateY(0%);
}
.headroom--unpinned {
    transform: translateY(-100%);
}

以上代码简单实现了菜单栏随着页面上下滚动的显示与隐藏效果。

cdn 地址：http://www.bootcdn.cn/headroom/