Slide Down a Bar on Scroll (JavaScript)

Halo teman-teman setelah kemarin kita mencoba memberikan efek Sticky Navigation pada sebuah halaman web, sekarang kita akan mencoba efek yang berbeda namun masih sedikit memiliki kemiripan. Efek Slide Down a Bar on Scroll dengan menggunakan JavaScript.

Fitur ini akan memunculkan menu atau navigasi ketika kita melakukan gulir (scroll) halaman web. Menarik bukan, teman-teman bisa mencobanya lho, silahkan dicoba potongan-potongan skrip kode berikut:

Kita mulai dengan membuat bagian tag body, dengan skrip berikut ini:

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

<div style="padding:15px 15px 2500px;font-size:30px">
  <p><b>This example demonstrates how to slide down a navbar when the user starts to scroll the page.</b></p>
  <p>Scroll down this frame to see the effect!</p>
  <p>Scroll to the top to hide the navbar.</p>
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

skrip diatas bisa teman-teman tempatkan pada bagian tag body, kemudian kita akan coba melanjutkan pada bagian cssnya dengan memberikan skrip berikut:

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;
}

Jangan lupa untuk menambahkan skrip JavaScript sebagai pemicu atau aktivasinya, skripnya teman-teman bisa lihat seperti yang ada dibawah ini:

<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("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
}
</script>

Jadi terdapat 3 bagian yang harus teman-teman buat, diantaranya bagian body, css dan javascript.
Untuk hasil akhirnya akan terlihat seperti berikut: