title: Using Headroom JS to hide navbar on scroll and appear when needed
body: <p>I am trying to use Headroom.js for my navigation bar, but I am having some difficulties getting it to work. </p>
  
  <p>( Headroom JS should hide the header &amp; nested nav when scrolling down but appear when needed )</p>
  
  <p>Not to sure where I'm going wrong, as I am still a beginner using javascript so I apologise for being very brief. </p>
  
  <p>My HTML is set up like this: </p>
  
  <pre><code>&lt;!-- initially --&gt;
  &lt;header class="headroom"&gt;
  
  &lt;!-- scrolling down --&gt;
  &lt;header class="headroom headroom--unpinned"&gt;
  
  &lt;!-- scrolling up --&gt;
  &lt;header class="headroom headroom--pinned"&gt;
  
  &lt;header id="header" class="header header--fixed hide-from-print" role="banner"&gt;
    &lt;nav&gt;   
    &lt;/nav&gt;
  &lt;/header&gt;
  &lt;/header&gt;
  &lt;/header&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.headroom {
  transition: transform 200ms linear;}
  
  .headroom--pinned {
  transform: translateY(0%);}
  
  .headroom--unpinned {
  transform: translateY(-100%);}
  
  header.headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out; z-   index: 9999;}
  header.headroom--unpinned {top: -75px;z-index: 9999;}
  header.headroom--pinned {top: 0; z-index: 9999;}
  
  
  nav{
  margin:0;
  padding:0px;
  text-align:center;
  background-color: #ffffff;
  border-bottom: 2px solid #d5dbdb;
  width: 100%;
  height: 60px;
  position: fixed;
  z-index: 9999;
  clear: both;
  top:0;
  opacity: 0.9;}
  </code></pre>
  
  <p>JS - I have linked the headroom.js file and jQuery file in my HTML:     </p>
  
  <pre><code>&lt;script type="text/javascript" src="js/headroom.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I have also added some script to the bottom of my page: </p>
  
  <pre><code>&lt;script&gt;
  (function() {
  var header = document.querySelector("#header");
  if(window.location.hash) {
    header.classList.add("slide--up");
  }
  
    new Headroom(header, {
      tolerance: {
        down : 10,
        up : 20
      },
      offset : 205,
      classes: {
        initial: "slide",
        pinned: "slide--reset",
        unpinned: "slide--up"
      }
  }).init();
  
  }());
  &lt;/script&gt;
  </code></pre>
  
  <p>Im not sure exactly what I am doing wrong, any comments or feedback would be much appreciated (Y)
  You can check out the source that I am trying to use (and follow) here -<a href="http://wicky.nillia.ms/headroom.js/" rel="nofollow">http://wicky.nillia.ms/headroom.js/</a></p>