ChampHead

Show Header On ScrollUp and Hide on ScrollDown

by Dhruvang Gajjar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header class="navbar headroom" role="banner">
  <center>ChampHead</center>
</header>
<div class="content"></div>

CSS

.headroom {
  position: fixed;
  top: 0;
  -webkit-transition: top 0.20s;
  transition: top 0.50s ease;
}

.headroom-hidden {
  top: -60px;
}

.navbar {
  left: 0;
  right: 0;
  height: 60px;
  background: #DDD;
}

.content {
  padding: 100px;
  height: 3000px;
}

JavaScript

$(function() {
  $('.headroom').each(function() {
    var $doc = $(document),
      $win = $(window),
      $self = $(this)

    , isHidden = false, lastScrollTop = 0

    $win.on('scroll', function() {
      var scrollTop = $doc.scrollTop()
      var offset = scrollTop - lastScrollTop
      lastScrollTop = scrollTop

      // min-offset, min-scroll-top
      if (offset > 10 && scrollTop > 200) {
        if (!isHidden) {
          $self.addClass('headroom-hidden')
          isHidden = true
        }
      } else if (offset < -10 || scrollTop < 200) {
        if (isHidden) {
          $self.removeClass('headroom-hidden')
          isHidden = false
        }
      }
    })
  })
})