How to hide a navbar when the user starts to scroll down ?

Just using 3 following step

• Step – 01. Necessary CSS Code
• Step – 02. HTML
• Step – 03. Few Code Of Java Script

CSS Code for Hide Navbar when scroll top or down

#navbar {
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  display: block;
  transition: top 0.3s;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

HTML Code for Hide Navbar when scroll down or top

<div id=”navbar”>
  <a href=”#home”>Home</a>
  <a href=”#news”>News</a>
  <a href=”#contact”>Contact</a>
</div>

Java Script Code for Hide Navbar when scroll down or top

<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById(“navbar”).style.top = “0”;
  } else {
    document.getElementById(“navbar”).style.top = “-50px”;
  }
  prevScrollpos = currentScrollPos;
}
</script>

Already If You Have Fixed Navbar You Can Try Only Java Script

• Just Change The Following Class Name With Your Navbar Class – navbar

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById(“navbar“).style.top = “0”;
  } else {
    document.getElementById(“navbar“).style.top = “-50px”;
  }
  prevScrollpos = currentScrollPos;
}