当前位置: 首页 > 工具软件 > headroom.js > 使用案例 >

headroom.js使用

皮景龙
2023-12-01

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

需要添加的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(); 

  

 

转载于:https://www.cnblogs.com/baixuemin/p/5670663.html

 类似资料: