title: How to get headroom.js working / step-by-step
body: <p>I really like the headroom.js but I just can not get it working. Some kind of step-by-step instruction would be great.
  So here is what I did so far...</p>
  
  <ol>
  <li><p>I downloaded the <a href="https://github.com/WickyNilliams/headroom.js" rel="nofollow">git repro</a></p></li>
  <li><p>Included the scripts to my html file right before my closing body tag </p></li>
  </ol>
  
  <p><code>&lt;script  type="text/javascript" src="js/headroom/Headroom.js"&gt;&lt;/script&gt;
  &lt;script  type="text/javascript"  src="js/headroom/jQuery.headroom.js"&gt;&lt;/script&gt;</code></p>
  
  <ol start="3">
  <li><p>Added following css to my css files</p>
  
  <p><code>.headroom {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: all .2s ease-in-out;
  }
  .headroom--unpinned {top: -100px;}
  .headroom--pinned {top: 0;}</code></p></li>
  <li><p>Added the headroom script at the very and even after the scripts links in point number 2</p>
  
  <p><code>&lt;script&gt;
  (function() {
  var header = new Headroom(document.querySelector("#header"), {
      tolerance: 5,
      offset : 205,
      classes: {
        initial: "animated",
        pinned: "slideDown",
        unpinned: "slideUp"
      }
  });
  header.init();
  }());
  &lt;/script&gt;</code></p></li>
  <li><p>Added the necessary ids and classes to my header HTML element
  <code>&lt;header id="header" class="header header--fixed hide-from-print" role="banner"&gt;&lt;my navigation stuff goes in there&gt;&lt;/header&gt;</code></p></li>
  </ol>
  
  <p>But I do not get it working somehow. I do not see any classes applied when scrolling nor anything else. Does anyone know the wrong part?</p>
  
  <p>I would be so greatful,..</p>
  
  <p>thanks in advance</p>