Nav Hide on Scroll Down

index.html

<nav>
  <div class="inner">
    <span class="site-title">LOGO HERE</span>
  </div>
</nav>

nav-hide-on-scroll-down.markdown

Nav Hide on Scroll Down

A Pen by Matthew Daniel Brown on CodePen.

License.

script.js

var scrollSet = null;
var didScroll = false;
var windowTop = $(window).scrollTop();


function scrollUpdate () {
  didScroll = true;
  windowTop = $(window).scrollTop();
}

function scrollTicker () {
  
  if(didScroll) {
    
    if(windowTop > scrollSet) {
      $('body').addClass('hide-nav')
      scrollSet = windowTop;  
    }
    
    else if(scrollSet > windowTop){
      $('body').removeClass('hide-nav') 
      scrollSet = windowTop;
    }
    
    didScroll = false
  }
  
  requestAnimationFrame(scrollTicker);
  
}

$(window).scroll(scrollUpdate);
scrollTicker();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.scss

body{
  height: 3000px;
  font-family: helvetica;
  margin: 0;
}

nav{
  background: #eee;
  width: 100%;
  position: fixed;
  transition: all 400ms ease;
  top: 0; 
  transform: translateY(0%);
  .inner{
    padding: 2em 0em;
  }
}

.hide-nav{
  nav{
    transform: translateY(-100%);
  }
}


.inner{
  max-width: 1000px;
  margin: auto;
}
.site-title{
  font-weight: 800;
}