javascript - 如何让 headroom.js 工作/一步一步

Question

我真的很喜欢 headroom.js，但我就是无法让它工作。某种分步说明会很棒。所以这就是我到目前为止所做的......

1. 我下载了 git repro

2. 在结束正文标记之前将脚本包含到我的 html 文件中

<script type="text/javascript" src="js/headroom/Headroom.js"></script>
<script type="text/javascript" src="js/headroom/jQuery.headroom.js"></script>

1. 在我的 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. 在第 2 点的脚本链接的正下方和之后添加了净空脚本

   <script>
(function() {
var header = new Headroom(document.querySelector("#header"), {
tolerance: 5,
offset : 205,
classes: {
initial: "animated",
pinned: "slideDown",
unpinned: "slideUp"
}
});
header.init();
}());
</script>

3. 向我的 header HTML 元素添加了必要的 ID 和类 <header id="header" class="header header--fixed hide-from-print" role="banner"><my navigation stuff goes in there></header>

但我无法让它以某种方式工作。我没有看到滚动时应用任何类，也没有看到其他任何东西。有谁知道错误的部分吗？

我会很感激，..

提前致谢

Answer 1

我使用 0.7.0 版 Headroom.js 和 jQuery.headroom.js 的设置与您在上面的旧站点中的设置非常相似 。这些是 /dist 中的文件该版本的目录。 Headroom.js 按预期工作。然后我使用 /src 中的文件尝试了最新版本 0.9.3目录(因为自 v0.8.0 以来不再包含 /dist)并且它没有向所选元素添加任何类，并且没有抛出任何错误(一切都正确加载，但没有快乐) .现在，我是一名 self 报告的新手，因此我确信对于为什么这对我的设置来说是一个重大变化，我确信有一个很好的解释。