<div class="container">
  <navbar id="navbar">
    <h1>NAVBAR<h1>
  </navbar>
</div>
<footer>
  <h3>End of the Page</h3>
</footer>

body{
  margin:0;
  padding:0;
}
.container{
  background:url('https://images.unsplash.com/photo-1497250681960-ef046c08a56e') no-repeat center center;
  height:170vh;
}
#navbar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:blue;
  border-radius:0 0 30px 30px;
  color:white;
  text-align:center;
  
  /*Define a height for NavBar*/
  height:80px;
  transition: 0.5s;
  /*and a transition time for a smooth appearence*/
  
}

footer{
  text-align:center;
  position:relative;
  bottom:0;
  left:0;
}

var lastScrollTop; // This Varibale will store the top position

navbar = document.getElementById('navbar'); // Get The NavBar

window.addEventListener('scroll',function(){
 //on every scroll this funtion will be called
  
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  //This line will get the location on scroll
  
  if(scrollTop > lastScrollTop){ //if it will be greater than the previous
    navbar.style.top='-80px';
    //set the value to the negetive of height of navbar 
  }
  
  else{
    navbar.style.top='0';
  }
  
  lastScrollTop = scrollTop; //New Position Stored
});