如何獲得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. 添加了必要的ID和班級我的頭HTML元素的很，甚至腳本後鏈接淨空腳本 <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按預期工作。然後我嘗試了最新版本0.9.3使用/src目錄中的文件（因爲/dist不再包括在內，因爲v0.8.0）並且它沒有向所選元素添加任何類，並且沒有錯誤拋出（一切正確，但沒有喜悅）。現在，我是一個自我報告的新手，因此我肯定有一個很好的解釋，爲什麼這是我的設置的突變。