Как вы используете headroom.js с помощью Bootstrap 3 navbar?

Я нашел этот виджет JavaScript http://wicky.nillia.ms/headroom.js/, и я хочу использовать его в веб-приложении с помощью Bootstrap 3. Он, похоже, не работает. Любое предложение или пример, что я должен делать?

В настоящее время я использую navbar-fixed-top на навигационной панели. Я пробовал с ним и без него, и он все еще не работает. Я вижу классы headroom.js, применяемые к заголовку, но в элементах пользовательского интерфейса нет никакого эффекта.

Решенный

Вам нужно добавить этот стиль.

<style type="text/css">
.headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}
.headroom--unpinned {top: -100px;}
.headroom--pinned {top: 0;}
</style>

Источник: http://codeasp.net/blogs/raghav_khunger/microsoft-net/2314/how-to-use-headroom-js

Ответ 1

Я нашел решение проблемы. Вам нужно добавить этот стиль.

<style type="text/css">
.headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}
.headroom--unpinned {top: -100px;}
.headroom--pinned {top: 0;}
</style>

Источник: http://codeasp.net/blogs/raghav_khunger/microsoft-net/2314/how-to-use-headroom-js

Спасибо Fox Genki за исходную ссылку.

Ответ 2

Попробуйте следующее:

<script type="text/javascript">
        $(".navbar-fixed-top").headroom();
</script>

Источник: http://codeasp.net/blogs/raghav_khunger/microsoft-net/2314/how-to-use-headroom-js

Демо: http://fiddle.jshell.net/raghav_khunger/d7QQ8/2/show/light/

Ответ 3

Стили в принятом ответе не требуются, чтобы получить headroom.js для работы с загрузочным буфером Twitter. Просто следуя инструкциям работайте с navbar-fixed-top. Главное, что вы назначаете стили этим классам, иначе ничего не происходит.

.headroom--pinned {
    display: block;
}
.headroom--unpinned {
    display: none;
}

Ответ 4

Я пробовал все вышеперечисленные шаги, но он не работал, пока я не добавил "! important" в стили. Так оно и стало: <style type="text/css"> .headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out !important;} .headroom--unpinned {top: -100px !important;} .headroom--pinned {top: 0 !important;} </style> его работа сейчас:)