Cara mengecilkan Navbar Ketika di Scroll dengan CSS + HTML

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

by Angga Rista October 21, 2020

Navbar memang tempatnya untuk menampilkan link yang sangat penting untuk mempermudahkan pengguna mendapatkan informasi yang mereka cari.

Tetapi, ketika suatu halaman di scroll ke bawah, navbar bisa saja terlihat memenuhi layar dan mengambil terlalu banyak tempat karena berisi terlalu banyak link. Pada materi kali ini kita akan belajar cara mengecilkan Navbar ketika halaman di scroll.

Langkah 1 – Tambahkan HTML

<div id="navbar">
  <a href="#" id="logo">Logo</a>
  <div id="navbar-right">
    <a class="active" href="#">Beranda</a>
    <a href="#">Kontak</a>
    <a href="#">Tentang</a>
  </div>
</div>

Langkah 2 – Tambahkan CSS

/* buat sticky navbar */
#navbar {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 90px 10px;
  transition: 0.4s;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 99;
}

/* warna link */
#navbar a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

/* logo */
#navbar #logo {
  font-size: 35px;
  font-weight: bold;
  transition: 0.4s;
}

/* warna link ketika mouse lewat */
#navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* warna link yg aktif */
#navbar a.active {
  background-color: dodgerblue;
  color: white;
}

/* posisi link kanan */
#navbar-right {
  float: right;
}

Langkah 3 – Tambahkan JavaScript

// ketika di scroll kebawah 80px dari atas halaman, perkecil navbar, jarak, dan font size
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.getElementById("navbar").style.padding = "30px 10px";
    document.getElementById("logo").style.fontSize = "25px";
  } else {
    document.getElementById("navbar").style.padding = "80px 10px";
    document.getElementById("logo").style.fontSize = "35px";
  }
}

Berikut adalah hasilnya

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}

body { 
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

#navbar {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 90px 10px;
  transition: 0.4s;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 99;
}

#navbar a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px; 
  line-height: 25px;
  border-radius: 4px;
}

#navbar #logo {
  font-size: 35px;
  font-weight: bold;
  transition: 0.4s;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: dodgerblue;
  color: white;
}

#navbar-right {
  float: right;
}

</style>
</head>
<body>

<div id="navbar">
  <a href="#" id="logo">Logo</a>
  <div id="navbar-right">
    <a class="active" href="#">Beranda</a>
    <a href="#">Kontak</a>
    <a href="#">Tentang</a>
  </div>
</div>

<div style="margin-top:210px;padding:15px 15px 0px;font-size:30px">
  <p>Lorem ipsum dolor dummy text to enable scrolling, 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 to enable scrolling, 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>
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.getElementById("navbar").style.padding = "30px 10px";
    document.getElementById("logo").style.fontSize = "25px";
  } else {
    document.getElementById("navbar").style.padding = "80px 10px";
    document.getElementById("logo").style.fontSize = "35px";
  }
}
</script>

</body>
</html>