Hide header on scroll down, show on scroll up

by Fahd Murtaza

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<header id="header">
  <div class="header-content clearfix">
    <a class="logo" href="#">
      <img src="http://stanfield.testweb/wp-content/themes/stanfieldtemp/images/stanfield_logo_white.png" alt="">
    </a>
    <nav class="navigation-left" role="navigation">
      <ul class="primary-nav">
        <li><a href="/properties">Properties</a></li>
        <li><a href="/mls">Search All Homes</a></li>
        <li><a href="/homevaluation">Home Valuation</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>
<main>
  This is your body.
</main>
<footer>
  This is your footer.
</footer>

SCSS

body {
  background: rgba(0, 0, 0, 0.7);
}


/* ------------------------------------------------------------------------------
	 Header
-------------------------------------------------------------------------------*/

header {
  position: fixed;
  width: 100%;
  z-index: 999;
  padding: 0 3em;
  margin-top: 2.5em;
  transition: top 0.2s ease-in-out;
  .header-content {
    margin: 0 auto;
    width: 100%;
    transition: padding 0.3s;
  }
  .logo {
    float: left;
  }
  .logo img {
    height: 1.5em;
    max-width: 100%;
  }
}

#header.fixed {
  background-color: rgba(0, 0, 0, 1);
}

#header.fixed .header-content {
  border-bottom: 0;
  padding: 25px 0;
}

#header.fixed .nav-toggle {
  top: 18px;
}

.navigation-left.open {
  opacity: 0.9;
  visibility: visible;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.navigation-left {
  float: left;
  margin-left: 40px;
}

.navigation-left li {
  display: inline-block;
}

.navigation-left a {
  font-family: 'Karla', sans-serif;
  cursor: pointer;
  margin-right: 2.5em;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.navigation-left a:hover,
.navigation a.active {
  color: #fff;
}


/* ------------------------------------------------------------------------------
	 Top Banner
-------------------------------------------------------------------------------*/

.banner {
  background-image: url(../images/home-image.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 1000px;
}

.banner span {
  font-size: 10.5px;
  font-family: 'Karla', sans-serif;
  text-transform: uppercase;
  color: #fff;
  display: block;
  margin-bottom: 1.8em;
}

.banner-text {
  padding-top: 20%;
  // Medium devices (tablets, 768px and up)
  @media (min-width: 768px) {}
  h1 {
    color: rgb(255, 255, 255);
    font-family:...

JavaScript

// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event) {
  didScroll = true;
});

setInterval(function() {
  if (didScroll) {
    hasScrolled();
    didScroll = false;
  }
}, 250);

function hasScrolled() {
  var st = $(this).scrollTop();

  // Make sure they scroll more than delta
  if (Math.abs(lastScrollTop - st) <= delta)
    return;

  // If they scrolled down and are past the navbar, add class .nav-up.
  // This is necessary so you never see what is "behind" the navbar.
  if (st > lastScrollTop && st > navbarHeight) {
    // Scroll Down
    $('header').removeClass('nav-down').addClass('nav-up');
  } else {
    // Scroll Up
    if (st + $(window).height() < $(document).height()) {
      $('header').removeClass('nav-up').addClass('nav-down');
    }
  }

  lastScrollTop = st;
}