0

我真的很喜欢 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. 向我的标题 HTML 元素添加了必要的 id 和类 <header id="header" class="header header--fixed hide-from-print" role="banner"><my navigation stuff goes in there></header>

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

我会很感激的，..

提前致谢

4

2 回答 2

2

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

于 2017-05-02T14:00:36.857 回答
1

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

  1. 前往开发者网站http://wicky.nillia.ms/headroom.js/
  2. 点击“制作”红色按钮下载。
  3. 然后按照文档的其余部分进行操作。
于 2019-01-04T07:27:34.857 回答