我真的很喜欢headroom.js，但我无法让它工作。某种逐步的指导会很棒。 所以这就是我到目前为止所做的......
我下载了git repro
在关闭正文标记
<script type="text/javascript" src="js/headroom/Headroom.js"></script>
<script type="text/javascript" src="js/headroom/jQuery.headroom.js"></script>
在我的css文件中添加了以下css
.headroom {
position: fixed;
top: 0;
left: 0;
right: 0;
transition: all .2s ease-in-out;
}
.headroom--unpinned {top: -100px;}
.headroom--pinned {top: 0;}
在第2点的脚本链接
后添加了余量脚本 <script>
(function() {
var header = new Headroom(document.querySelector("#header"), {
tolerance: 5,
offset : 205,
classes: {
initial: "animated",
pinned: "slideDown",
unpinned: "slideUp"
}
});
header.init();
}());
</script>
为标题HTML元素添加了必要的ID和类
<header id="header" class="header header--fixed hide-from-print" role="banner"><my navigation stuff goes in there></header>
但我不知道它是以某种方式运作的。滚动时我也没有看到任何类应用。有谁知道错误的部分？
我会非常感激，...
提前致谢
答案 0 :(得分：2)
我使用版本 0.7.0 的 Headroom.js 和 jQuery.headroom.js，在旧版网站上提供的设置非常相似即可。这些是该版本的/dist目录中的文件。 Headroom.js按预期工作。然后我使用/src目录中的文件尝试了最新版本 0.9.3 （因为 v0.8.0 后不再包含/dist并且它没有向所选元素添加任何类，并且没有抛出任何错误（一切都正确加载，但没有欢乐）。现在，我是一个自我报告的新手，因此我确定有一个很好的解释，为什么这是我的设置的重大变化。
答案 1 :(得分：1)
不要从Github下载它，因为使用前您需要先构建它。