Headroom
html
<header class="header"></div>
CSS
.header {
background: rgba(255,255,255,.5);
width: 100%;
height: 100px;
line-height: 100px;
font-size: 20px;
position: fixed;
overflow: hidden;
z-index: 99;
}
JavaScript
// 纯JS调用方式
// 获取页面元素
var myElement = document.querySelector("header");
// 创建 Headroom 对象,将页面元素传递进去
var headroom = new Headroom(myElement);
// 初始化
headroom.init();
各位大神是不是这样调用啊
还一个,看看你的JavaScript是放页面头部还是尾部的。
看代码没有问题。有没有引入Headroom.js
文件?还有如果你要有上下滚动滑条有不同效果是要定义headroom--unpinned
和headroom--pinned
类名的样式!不然就一点效果都没有!
吐槽:
1. 还有background: rgba(255,255,255,.5);
背景色设置成了白色,如果没改变body
的背景色压根就看不到把?
2. '<header class="header">'你用了header
标签,为什么闭合是</div>
,写错了把。