headroom.js使用

为页面顶部多留些空间。在不需要页头时将其隐藏

需要添加的css代码

.headroom {
transition: transform 200ms linear;
}
.headroom--pinned {
transform: translateY(0%);
}
.headroom--unpinned {
transform: translateY(-100%);
}

加载headroom.js

初始化代码，然后就可以执行了。

// 获取页面元素
var myElement = document.querySelector("header");
// 创建 Headroom 对象，将页面元素传递进去
var headroom  = new Headroom(myElement);
// 初始化
headroom.init();