Cara Membuat Sticky Navigation Menu di Website dengan HTML, CSS, dan JavaScript

Pendahuluan

Sticky navigation atau menu navigasi yang tetap berada di atas saat halaman digulir adalah fitur yang sangat berguna untuk meningkatkan pengalaman pengguna di situs web. Fitur ini membuat menu selalu terlihat saat pengunjung menggulir ke bawah, sehingga mereka dapat dengan mudah berpindah ke bagian lain dari situs.

Langkah 1: Membuat Struktur HTML

Pertama, kita perlu membuat struktur HTML untuk menu navigasi dan beberapa seksi pada halaman agar efek sticky terlihat saat menggulir. Buatlah file HTML baru dengan kode berikut:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sticky Navigation Menu</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <!-- Navigation Bar -->
  <nav class="navbar">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>

  <!-- Content Sections -->
  <section id="home">Home Section</section>
  <section id="about">About Section</section>
  <section id="services">Services Section</section>
  <section id="contact">Contact Section</section>

  <script src="script.js"></script>
</body>
</html>

Langkah 2: Menambahkan CSS untuk Styling

Selanjutnya, kita perlu menambahkan style untuk elemen navigasi dan halaman agar tampak menarik. Buat file CSS baru bernama styles.css dan tambahkan kode berikut:

/* Reset dasar */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

/* Styling Navbar */
.navbar {
  background-color: #333;
  color: white;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  padding: 10px 0;
  text-align: center;
}

.navbar ul {
  list-style: none;
}

.navbar li {
  display: inline;
  margin: 0 15px;
}

.navbar a {
  color: white;
  text-decoration: none;
  font-size: 18px;
}

.navbar a:hover {
  color: #ffdd57;
}

/* Konten Seksi */
section {
  padding: 100px 20px;
  min-height: 100vh;
}

#home { background-color: #f4f4f4; }
#about { background-color: #e4e4e4; }
#services { background-color: #d4d4d4; }
#contact { background-color: #c4c4c4; }

Langkah 3: Menambahkan Efek Sticky dengan JavaScript

Gunakan JavaScript sederhana untuk menambahkan efek sticky pada menu navigasi. Buat file JavaScript baru bernama script.js dan tambahkan kode berikut:

window.onscroll = function() { stickyNav(); };

const navbar = document.querySelector(".navbar");
const sticky = navbar.offsetTop;

function stickyNav() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky");
  } else {
    navbar.classList.remove("sticky");
  }
}

Langkah 4: Menambahkan Style untuk Kelas Sticky

Terakhir, tambahkan style CSS khusus untuk kelas sticky agar tampak menonjol saat menu "menempel" di bagian atas layar:

.sticky {
  background-color: #222;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

Penjelasan Kode

HTML: Membuat struktur navigasi dan beberapa seksi untuk menampilkan efek sticky.
CSS: Styling untuk menyesuaikan tampilan navigasi dan membuat navbar tetap berada di posisi atas dengan position: fixed.
JavaScript: Menambah kelas sticky saat pengguna menggulir ke bawah, sehingga navigasi tetap di tempat.

Kesimpulan

Dengan menyelesaikan tutorial ini, Anda telah berhasil membuat sticky navigation menu yang tetap berada di atas saat pengguna menggulir halaman. Fitur ini sederhana namun sangat bermanfaat untuk meningkatkan pengalaman pengguna di website Anda.