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();