Bootstrap3 + headroom.js が動かないときの対処法

スクロールに合わせてヘッダーをいい具合に表示・非表示させる事ができるheadroom.jsが
Bootstrap3だと動かなかったので、対処法をメモしておきます。

headroom.jsについて

[JS]ヘッダをスクロールに合わせて表示・非表示する1ランク便利なスクリプト -Headroom.js
http://coliss.com/articles/build-websites/operation/javascript/js-headroom.html

jQuery Plugin – Headroom.js の使い方
http://miyakawa.me/?p=4777

これをBootstrap3のnavbarで構成したヘッダーに使って見ましたが動かなかったので、
調べたところStackOverflowにそのものずばりの回答がありました。

How do you use headroom.js with Bootstrap 3 navbar?
http://stackoverflow.com/questions/20648451/how-do-you-use-headroom-js-with-bootstrap-3-navbar

bootstrap3で動かない場合は、下記のCSSを追加します。

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

無事、解決しました。。