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

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/