如何让 headroom.js 工作/一步一步答案

【问题标题】：How to get headroom.js working / step-by-step如何让 headroom.js 工作/一步一步
【发布时间】：2016-09-19 07:42:46
【问题描述】：

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

我下载了git repro
在我的结束正文标记之前将脚本包含到我的 html 文件中

<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>

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

我会很高兴的，..

提前致谢

【问题讨论】：

没有人帮我一把吗？我不明白这个post

标签： javascript html css headroom.js

【解决方案1】：

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

【讨论】：

【解决方案2】：

不要从 Github 下载它，因为你需要在使用前先构建它。

前往开发者网站http://wicky.nillia.ms/headroom.js/
点击“Production”红色按钮下载。
然后按照文档的其余部分进行操作。

【讨论】：