how to slide down the navbar html
snippet in html

how to slide down the navbar html

user6509

<div id="navbar"> <!-- Make sure the div is an id. -->
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

<div style="padding:15px 15px 2500px;"><div> <!-- This is the block that will 
 												  appear over the image. -->
<script>
// Change both number '20' to make the navbar appear when you want.
// I suggest '900' if you want it to appear near the bottom of you screen.
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
}
</script>
  
<style>  /* CSS - you should get into the practice of putting css into another
  				  page/ file. It just makes it easier to read and edit.*/
body {
  margin: 0;
  background-color: #f1f1f1;
  font-family: Arial, Helvetica, sans-serif;
}

#navbar {
  background-color: #333;
  position: fixed;
  top: -50px;
  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;
}
</style>