How do you use headroom.js with Bootstrap 3 navbar?

Question

I found this JavaScript widget http://wicky.nillia.ms/headroom.js/ and I want to use it in a web application using Bootstrap 3. It doesn\'t seem to be working. Any suggestion o

Answer 1

Try this :

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

Source : http://codeasp.net/blogs/raghav_khunger/microsoft-net/2314/how-to-use-headroom-js

Demo : http://fiddle.jshell.net/raghav_khunger/d7QQ8/2/show/light/

Answer 2

I tried all the above steps but it wasn't working until i added "!important" to the styles.So it became this: <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> its working now :)

Answer 3

I found the solution to the problem. You need to add this style.

<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>

Source: http://codeasp.net/blogs/raghav_khunger/microsoft-net/2314/how-to-use-headroom-js

Thanks Fox Genki for the source link.

Answer 4

The styles in the accepted answer aren't required to get headroom.js to work w/ Twitter Bootstrap 3. Simply following the instructions will work with navbar-fixed-top. The main thing is that you assign styles to these classes, otherwise nothing appears to happen.

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