讓headroom.js在我的網站上無法正常工作

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元素。 您需要在頁面底部加載此腳本，或者使其完整地加載到文檔中。