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