title: How do you use headroom.js with Bootstrap 3 navbar?
body: <p>I found this JavaScript widget <a href="http://wicky.nillia.ms/headroom.js/">http://wicky.nillia.ms/headroom.js/</a> and I want to use it in a web application using Bootstrap 3. It  doesn't seem to be working. Any suggestion or example what I should do? </p>
  
  <p>I'm currently using navbar-fixed-top on the navbar. I tried with and without it and it is still not working. I can see the headroom.js classes applied to the header but there is no effect in the UI elements. </p>
  
  <hr>
  
  <p><strong>Resolved</strong></p>
  
  <p>You need to add this style.</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  .headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}
  .headroom--unpinned {top: -100px;}
  .headroom--pinned {top: 0;}
  &lt;/style&gt;
  </code></pre>
  
  <p>Source: <a href="http://codeasp.net/blogs/raghav_khunger/microsoft-net/2314/how-to-use-headroom-js">http://codeasp.net/blogs/raghav_khunger/microsoft-net/2314/how-to-use-headroom-js</a></p>