Membuat Hide Menu on Scroll

Langsung saja, berikut kodenya, 

HTML :

<div id="hi1">
  <a href="#">Top</a>
  <a href="#blog-pager">Video</a>
  <a href="#footer">Footer</a>
  <a href="#PopularPosts1">Popular</a>
</div>

Script :

<script>
var prevS = window.pageYOffset;
window.onscroll = function() {
var currentS = window.pageYOffset;
  if (prevS > currentS) {
    document.getElementById("hi1").style.opacity = "0.99";
  } else {
    document.getElementById("hi1").style.opacity = "0.02px";
  }
  prevS = currentS;
}
</script>

CSS :

<style>
  body{margin-top:56px}
  html{scroll-behavior:smooth}
#hi1 {
  background-color: #333;
  position: fixed;
bottom:0;left:0;
  width: 100%;
  display: block;
  transition: top 0.3s;
}

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

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

Dan ini contoh hasilnya:

Top Video Footer Popular

.

!

.

.

.