Using Headroom JS to hide navbar on scroll and appear when needed

css, html, javascript, jquery

Solution

No need for plugins, here's a FIDDLE

<header class="default">


</header>

header {
  background: #444;
  position: fixed;
  left: 0;
  width: 100%;
  height: 80px;
  transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
}
.default {
  top: 0;
}
.fixed {
  top: -80px;
}

<script>
  (function($) {
    var ost = 0;
    $(window).scroll(function() {
      var cOst = $(this).scrollTop();

      if(cOst > 200 && cOst > ost) {
         $('header').addClass('fixed').removeClass('default');
      }
      else {
         $('header').addClass('default').removeClass('fixed');
      }

      ost = cOst;
    });
  })(jQuery);
</script>

*Note: Put the script just before `</body>` tag.

Problem

I am trying to use Headroom.js for my navigation bar, but I am having some difficulties getting it to work. ( Headroom JS should hide the header & nested nav when scrolling down but appear when needed ) Not to sure where I'm going wrong, as I am still a beginner using javascript so I apologise for being very brief. My HTML is set up like this: ``` <!-- initially --> <header class="headroom"> <!-- scrolling down --> <header class="headroom headroom--unpinned"> <!-- scrolling up --> <header class="headroom headroom--pinned"> <header id="header" class="header header--fixed hide-from-print" role="banner"> <nav> </nav> </header> </header> </header> </header> ``` CSS: ``` .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;} ``` JS - I have linked the headroom.js file and jQuery file in my HTML: ``` <script type="text/javascript" src="js/headroom.js"></script> ``` I have also added some script to the bottom of my page: ``` <script> (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(); }()); </script> ``` 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 -http://wicky.nillia.ms/headroom.js/

Original source