Menampilkan Menu Ketika Scrool ke Bawah

Cara Geser Bar ke Bawah
Langkah 1) Tambahkan HTML:
Buat bilah navigasi:

Contoh

<div id="navbar">

  <a href="#home">Home</a>

  <a href="#news">News</a>

  <a href="#contact">Contact</a>

</div>

Langkah 2) Tambahkan CSS:
Gaya bilah navigasi:

Contoh

#navbar {

  background-color: #333; /* Black background color */

  position: fixed; /* Make it stick/fixed */

  top: -50px; /* Hide the navbar 50 px outside of the top view */

  width: 100%; /* Full width */

  transition: top 0.3s; /* Transition effect when sliding down (and up) */

}



/* Style the navbar links */

#navbar a {

  float: left;

  display: block;

  color: white;

  text-align: center;

  padding: 15px;

  text-decoration: none;

}



#navbar a:hover {

  background-color: #ddd;

  color: black;

}

Langkah 3) Tambahkan JavaScript:
Contoh

// When the user scrolls down 20px from the top of the document, slide down the navbar

// When the user scrolls to the top of the page, slide up the navbar (50px out of the top view)

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

  }

}

Share :