Question

我正在尝试将headroom.js（http://wicky.nillia.ms/headroom.js/）添加到我的投资组合网站，但我无法让它工作。

我已经下载了headroom.min.js并将其添加到我创建的js文件夹中的网站上。我根本没有改变代码（不确定我是否需要）。我的头标记

  <script src="js/headroom.min.js"></script>   
  <script type="text/javascript">
    // grab an element
    var myElement = document.querySelector("header");
    // construct an instance of Headroom, passing the element
    var headroom  = new Headroom(myElement);
    // initialise
    headroom.init();
</script>

标题以及固定和取消固定的CSS：

header {width:100%;height:75px;background: #383838 url('../images/header-bg.png') repeat-x    left top;}
header.headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}
header.headroom--unpinned {top: -75px;}
header.headroom--pinned {top: 0;}

我的标题没有任何类，我只是使用标题标记。

现在我的标题位于页面顶部，未固定。我对javascript很新，可能会遗漏一些非常明显的东西。如果你能提供帮助，请告诉我！

谢谢！

Answer 1

您可能在加载html之前在页面顶部运行脚本，因此尚未加载header元素。您需要在页面底部加载此脚本，或者在文档完成时加载它。

无法让headroom.js在我的网站上工作

1 个答案: