Cara Membuat Bar Bergeser ke Bawah saat di Scroll

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Catur Kurnia Sari November 29, 2020

Pelajari cara menggeser bar navigasi ke bawah saat discroll 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: -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;
}
</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">
  <p><b>Contoh ini menunjukkan cara menggeser bar navigasi ke bawah saat pengguna mulai menggulir halaman.</b></p>
  <p>Scroll down frame ini untuk melihat efeknya!</p>
  <p>Scroll ke atas untuk menyembunyikan 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>
</div>

<script>
// Saat pengguna scroll ke bawah 20px dari atas dokumen, geser ke bawah bar navigasi
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>

</body>
</html>

Section Artikel

1 Cara Menggeser Bar ke Bawah

Cara Menggeser Bar ke Bawah

Langkah 1) Tambahkan HTML

Buat bar 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

Memberi style pada bar navigasi.

Contoh:

#navbar {
  background-color: #333; /* Warna background hitam */
  position: fixed; /* Buat posisi stick/fixed */
  top: -50px; /* Sembunyikan bar navigasi 50px di luar tampilan atas */
  width: 100%; /* lebar penuh */
  transition: top 0.3s; /* Efek transisi saat menggeser ke bawah (dan ke atas) */
}

/* Style 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 menggulir ke bawah 20px dari bagian atas dokumen, geser ke bawah bar navigasi
// Saat pengguna menggulir ke bagian atas halaman, geser bar navigasi ke atas (50px dari tampilan atas)
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";
  }
}

How To