body {
  padding-top: 40px; // same as header height
}header {
  background: #f5b335;
  height: 40px;
  position: fixed;
  top: 0;
  transition: top 0.2s ease-in-out;
  width: 100%;
}// we'll add this class using javascript
.nav-up {
  top: -40px; // same as header height. use variables in LESS/SASS
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
var didScroll;// on scroll, let the interval function know the user has scrolled
$(window).scroll(function(event){
  didScroll = true;
});// run hasScrolled() and reset didScroll status
setInterval(function() {
  if (didScroll) {
    hasScrolled();
    didScroll = false;
  }
}, 250);function hasScrolled() {
  // do stuff here...
}
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $(‘header’).outerHeight();
var st = $(this).scrollTop();
// If current position > last position AND scrolled past navbar...
if (st > lastScrollTop && st > navbarHeight){  // Scroll Down
  $(‘header’).removeClass(‘nav-down’).addClass(‘nav-up’);} else {  // Scroll Up
  // If did not scroll past the document (possible on mac)...  if(st + $(window).height() < $(document).height()) { 
    $(‘header’).removeClass(‘nav-up’).addClass(‘nav-down’);
  }}