How To

Cara Membuat Menu di Sembunyikan saat di Scroll

Pelajari cara menyembunyikan menu navigasi saat discroll ke bawah dengan CSS dan JavaScript.

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  background-color: #f1f1f1;
  font-family: Arial, Helvetica, sans-serif;
}

#navbar {
  background-color: #333;
  position: fixed;
  top: 0;
  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>
</head>
<body>

<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;margin-top:30px;">
  <p><b>Contoh ini menunjukkan cara menyembunyikan bar navigasi saat pengguna mulai menscroll halaman.</b></p>
  <p>Scroll kebawah frame ini untuk melihat efeknya!</p>
  <p>Scroll ke atas untuk menampilkan bar navigasi.</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>
  <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>

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

</body>
</html>

Cara Menyembunyikan Navbar saat Scroll Down

Langkah 1) Tambahkan HTML

Buat navigasi bar.

Contoh:

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

Langkah 2) Tambahkan CSS

Memberi style pada bar navigasi.

Contoh:

#navbar {
  background-color: #333; /* warna background hitam */  position: fixed; /* buat posisinya stick/fixed */  top: 0; /* Tetap diatas */  width: 100%; /* lebar penuh */  transition: top 0.3s; /* Efek transisi saat bergeser ke bawah (dan ke atas) */}

/* Style pada link navbar */#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:

/* Saat pengguna scroll ke bawah, sembunyikan bar navigasi. Saat pengguna scroll ke atas, tampilkan bar 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;
}

Catur Kurnia Sari

Share
Tags: How To