Bagaimana membuat: menghilangkan menu saat menggulir

Bagaimana menghilangkan baring navigasi saat menggulir ke bawah

Tahap pertama - Tambahkan HTML:

Buat baring navigasi:

<div id="navbar">
  <a href="#home">Beranda</a>
  <a href="#news">Berita</a>
  <a href="#contact">Kontak</a>
</div>

Tahap kedua - Tambahkan CSS:

Atur gaya baring navigasi:

#navbar {
  background-color: #333; /* Warna latar belakang hitam */
  position: fixed; /* Membuatnya lepas/tetap */
  top: 0; /* Tetap di atas */
  lebar: 100%; /* Penuh lebar */
  transition: top 0.3s; /* Efect transisi saat menggulir ke bawah (ke atas) */
}
/* Atur gaya tautan baring navigasi */
#navbar a {
  float: kiri;
  display: block;
  warna: putih;
  text-align: tengah;
  padding: 15px;
  text-decoration: none;
}
#navbar a:hover {
  background-color: #ddd;
  warna: hitam;
}

Tahap ketiga - Tambahkan JavaScript:

/* Saat pengguna menggulir ke bawah, sembunyikan baring navigasi. Saat pengguna menggulir ke atas, tampilkan baring navigasi. */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}

Coba sendiri