Cara Menyusutkan Header Pada Sebuah Website

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

by Hanifah Nurbaeti February 20, 2021

Di bawah ini kita akan mempelajari cara mengecilkan header saat melakukan scrolling dengan CSS dan JavaScript.

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

#header {
  background-color: #f1f1f1;
  padding: 50px 10px;
  color: black;
  text-align: center;
  font-size: 90px; 
  font-weight: bold;
  position: fixed;
  top: 0;
  width: 100%;
  transition: 0.2s;
}
</style>
</head>
<body>

<div id="header">Header</div>

<div style="margin-top:200px;padding:15px 15px 2500px;font-size:30px">
<p> <b> Contoh ini menunjukkan cara mengecilkan header saat pengguna mulai mengscroll halaman. </b> </p>
   <p> scroll ke bawah teks ini untuk melihat efeknya! </p>
   <p> scroll ke atas untuk menghapus efek. </p>
  <p>Contoh simple untuk melakukan penyusutan header saat di scroll oleh pengguna pada sebuah website.Contoh simple untuk melakukan penyusutan header saat di scroll oleh pengguna pada sebuah website.Contoh simple untuk melakukan penyusutan header saat di scroll oleh pengguna pada sebuah website.Contoh simple untuk melakukan penyusutan header saat di scroll oleh pengguna pada sebuah website.Contoh simple untuk melakukan penyusutan header saat di scroll oleh pengguna pada sebuah website.Contoh simple untuk melakukan penyusutan header saat di scroll oleh pengguna pada sebuah website.</p>
</div>

<script>
// Saat pengguna mengscroll ke bawah 50px dari bagian atas dokumen, ubah ukuran ukuran font header
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("header").style.fontSize = "30px";
  } else {
    document.getElementById("header").style.fontSize = "90px";
  }
}
</script>

</body>
</html>

Cara Menyusut Header di Scroll

Langkah 1) Tambahkan HTML:
Buat header:

<div id="header">Header</div>

Langkah 2) Tambahkan CSS:
Style pada header:
Contoh

#header {
  background-color: #f1f1f1; /* Warna background abu-abu */
  padding: 50px 10px; /*  padding */
  color: black;
  text-align: center; /* posisi teks di tengah */
  font-size: 90px; /* ukuran font yang besar */
  font-weight: bold;
  position: fixed; /* Fixed position - tetapkan halaman di atas */
  top: 0;
  width: 100%; /* lebar maksimum */
  transition: 0.2s; /* tambahkan efek transisi (saat melakukan scroll - dan ukuran font dikurangi) */
}

Langkah 3) Tambahkan JavaScript:
Contoh

// Saat pengguna mengscroll ke bawah 50px dari bagian atas dokumen, ubah ukuran ukuran font header
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("header").style.fontSize = "30px";
  } else {
    document.getElementById("header").style.fontSize = "90px";
  }
}