Как заставить 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>

3. Добавлены следующие 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;}

4. Добавлен сценарий запаса мощности в самом и даже после скриптовых ссылках в пункте № 2

   <script> (function() { var header = new Headroom(document.querySelector("#header"), { tolerance: 5, offset : 205, classes: { initial: "animated", pinned: "slideDown", unpinned: "slideUp" } }); header.init(); }()); </script>

5. Добавил необходимые идентификаторы и классы в мой 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), и не добавляет никаких классов к выбранному элементу, и не было выдано никаких ошибок (все загружено правильно, но без радости). Теперь я новичок, о котором сообщают сами, поэтому я уверен, что есть хорошее объяснение, почему это было серьезным изменением для моей установки.

Answer 2

Не загружайте его с Github, потому что вам нужно сначала собрать его перед использованием.

1. Перейти на сайт разработчика http://wicky.nillia.ms/headroom.js/
2. Нажмите на "Производство" красную кнопку, чтобы скачать.
3. Затем следуйте остальной документации.