This example demonstrates how to slide down a navbar when the user starts to scroll the page.

Scroll to the top to hide the navbar.

CODE:

<style>
#kv-navbar {
  background-color: #333;
  position: fixed;
  top: -50px;
  width: 100%;
  display: block;
  transition: top 0.3s;
  z-index:2;
}

#kv-navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 12px 20px;
  text-decoration: none;
  font-size: 16px;
}

#kv-navbar a:hover {
  background-color: #ddd;
  color: black;
}
</style>


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


<script>
// When the user scrolls down 20px from the top of the document, slide down the navbar
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("kv-navbar").style.top = "0";
  } else {
    document.getElementById("kv-navbar").style.top = "-50px";
  }
}
</script>