Home Coding Cara Mudah Membuat Sticky Navbar Saat Scroll (HTML & CSS)

Cara Mudah Membuat Sticky Navbar Saat Scroll (HTML & CSS)

Farhan Hidayat 20 April 2026 7 min read

Pernah merasa navigasi website jadi ribet saat scroll panjang? Nah, di sinilah sticky navbar jadi solusi. Dengan memahami cara membuat sticky navbar, kamu bisa menjaga menu tetap terlihat di atas, sehingga pengunjung lebih nyaman saat menjelajah halaman.

Sticky navbar adalah menu navigasi yang tetap “menempel” di bagian atas saat halaman di-scroll. Berbeda dengan navbar biasa yang ikut hilang, sticky navbar justru membantu pengguna mengakses menu kapan saja.

Selain itu, fitur ini juga meningkatkan user experience. Pengunjung tidak perlu bolak-balik scroll ke atas hanya untuk pindah halaman. Jadi, website terasa lebih praktis dan profesional.

Sebelum mulai, kamu perlu menyiapkan struktur HTML sederhana. Biasanya, navbar terdiri dari elemen seperti <header>, <nav>, dan list menu.

Also Read: Cara Membuat 10 Animasi Scroll CSS & JS yang Smooth

Contoh sederhana:

<header>
  <nav class="navbar">
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </nav>
</header>

Dengan struktur ini, kamu sudah punya pondasi untuk membuat navbar yang tetap saat scroll.

Styling Dasar dengan CSS

Selanjutnya, tambahkan styling agar navbar terlihat rapi. Misalnya, kamu bisa mengatur warna, padding, dan posisi elemen.

Also Read: Cara Mudah Membuat Dropdown Menu dengan HTML CSS

.navbar {
  background: #007bff;
  padding: 15px;
}
.navbar ul {
  display: flex;
  list-style: none;
  gap: 20px;
}

Dengan styling dasar ini, tampilan navbar jadi lebih enak dilihat.

Menggunakan position: sticky

Sekarang masuk ke bagian utama. Untuk membuat sticky navbar, kamu cukup menggunakan properti CSS position: sticky.

.navbar {
  position: sticky;
  top: 0;
}

Dengan ini, navbar akan otomatis menempel saat scroll mencapai posisinya.

Also Read: 7 Animasi Teks CSS Otomatis yang Bikin Website Lebih Hidup

Menentukan Posisi dengan top

Properti top: 0 berfungsi agar navbar menempel di bagian paling atas layar. Tanpa ini, sticky tidak akan bekerja maksimal.

Selain itu, kamu juga bisa menambahkan z-index agar navbar tidak tertutup elemen lain.

.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
}

Berikut contoh lengkapnya:

Also Read: Cara Membuat Loading Spinner CSS Simple & Responsif

<header>
  <nav class="navbar">
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </nav>
</header>

body {
  margin: 0;
}
.navbar {
  position: sticky;
  top: 0;
  background: #007bff;
  padding: 15px;
  z-index: 1000;
}

Dengan kode ini, kamu sudah berhasil membuat navbar yang tetap saat halaman di-scroll.

Perbedaan Sticky vs Fixed

Selain sticky, kamu juga bisa menggunakanposition: fixed. Namun, keduanya punya perbedaan.

Sticky → aktif saat posisi tertentu
Fixed → selalu menempel di layar

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
}

Namun, kamu perlu menambahkan margin pada konten agar tidak tertutup navbar.

Also Read: 10 Card UI HTML CSS untuk Landing Page yang Responsif & Modern

cara membuat sticky navbar

Full Code – SaaS Landing Page (Premium UI)

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SaaS UI Navbar</title>

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}

body {
  background: radial-gradient(circle at top, #1e3a8a, #020617);
  color: white;
  min-height: 200vh;
}

/* NAVBAR */
.navbar {
  position: sticky;
  top: 20px;
  width: 85%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 14px 25px;
  border-radius: 14px;

  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.1);

  transition: 0.3s;
  z-index: 1000;
}

.navbar.scrolled {
  background: rgba(255,255,255,0.15);
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}

/* LOGO */
.logo {
  font-weight: 700;
  font-size: 18px;
}

/* MENU */
.nav-links {
  display: flex;
  gap: 30px;
  list-style: none;
}

.nav-links a {
  text-decoration: none;
  color: #cbd5f5;
  font-size: 14px;
  position: relative;
}

/* underline hover */
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 2px;
  background: #60a5fa;
  transition: 0.3s;
}

.nav-links a:hover::after {
  width: 100%;
}

/* CTA */
.cta {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 14px;
  text-decoration: none;
  color: white;
}

/* HERO */
.hero {
  text-align: center;
  margin-top: 120px;
}

.hero h1 {
  font-size: 42px;
  font-weight: 700;
}

.hero p {
  margin-top: 10px;
  color: #94a3b8;
}

/* CARDS */
.container {
  width: 80%;
  margin: 80px auto;
}

.card {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;

  padding: 20px;
  border-radius: 14px;

  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);

  transition: 0.3s;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}

.image {
  width: 120px;
  height: 100px;
  border-radius: 10px;
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
}

.content h2 {
  font-size: 18px;
}

.content p {
  font-size: 14px;
  color: #94a3b8;
  margin: 8px 0;
}

.btn {
  padding: 6px 14px;
  border-radius: 6px;
  border: none;
  background: #3b82f6;
  color: white;
}

/* MOBILE */
.menu-toggle {
  display: none;
  font-size: 22px;
  cursor: pointer;
}

@media(max-width:768px) {
  .menu-toggle {
    display: block;
  }

  .nav-links {
    position: absolute;
    top: 70px;
    right: 0;
    width: 100%;
    flex-direction: column;
    background: rgba(0,0,0,0.9);
    padding: 20px;
    display: none;
  }

  .nav-links.active {
    display: flex;
  }

  .container {
    width: 90%;
  }

  .card {
    flex-direction: column;
  }
}
</style>
</head>

<body>

<!-- NAVBAR -->
<nav class="navbar">
  <div class="logo">ArtikelPro</div>

  <div class="menu-toggle">☰</div>

  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">Features</a></li>
    <li><a href="#">Pricing</a></li>
  </ul>

  <a href="#" class="cta">Get Started</a>
</nav>

<!-- HERO -->
<section class="hero">
  <h1>Sticky Navbar Modern</h1>
  <p>UI clean, smooth, dan profesional untuk website kamu</p>
</section>

<!-- CONTENT -->
<div class="container">

  <div class="card">
    <div class="image"></div>
    <div class="content">
      <h2>Navbar Smooth Scroll</h2>
      <p>Efek modern saat halaman di scroll.</p>
      <button class="btn">Explore</button>
    </div>
  </div>

  <div class="card">
    <div class="image"></div>
    <div class="content">
      <h2>Responsive Layout</h2>
      <p>Tampilan tetap rapi di semua device.</p>
      <button class="btn">Explore</button>
    </div>
  </div>

</div>

<!-- JS -->
<script>
const navbar = document.querySelector(".navbar");
const toggle = document.querySelector(".menu-toggle");
const navLinks = document.querySelector(".nav-links");

window.addEventListener("scroll", () => {
  navbar.classList.toggle("scrolled", window.scrollY > 30);
});

toggle.addEventListener("click", () => {
  navLinks.classList.toggle("active");
});
</script>

</body>
</html>

Agar lebih optimal, pastikan navbar tetap rapi di berbagai ukuran layar. Kamu bisa menggunakan flexbox dan menyesuaikan ukuran font.

Selain itu, gunakan media query jika diperlukan. Dengan begitu, tampilan tetap nyaman di mobile maupun desktop.

Kesalahan yang Sering Terjadi

Banyak yang gagal saat mencoba membuat navbar tetap saat scroll. Biasanya karena:

Tidak menambahkan top: 0
Parent memiliki overflow: hidden
Tidak mengatur z-index
Layout tidak responsive

Tips Biar Hasil Lebih Maksimal

Agar hasilnya lebih menarik, kamu bisa:

Menambahkan shadow saat scroll
Menggunakan transisi halus
Memilih warna kontras
Mengoptimalkan tampilan mobile

Dengan sedikit sentuhan ini, navbar terlihat lebih modern.

Kesimpulan

Sekarang kamu sudah paham cara membuat sticky navbar dengan HTML & CSS. Prosesnya cukup sederhana, namun dampaknya besar untuk kenyamanan pengguna. Jadi, pastikan kamu menerapkan teknik ini agar website terlihat lebih profesional dan mudah digunakan.

FAQ

Sticky aktif saat posisi tertentu, sedangkan fixed selalu menempel di layar.

Biasanya karena tidak menggunakan top: 0 atau parent memiliki overflow.

3. Apakah bisa tanpa JavaScript?

Tentu saja. Kamu cukup menggunakan CSS seperti position: sticky.

Untuk referensi lebih lanjut, kamu bisa membaca dokumentasi resmi di MDN Web Docs atau melihat contoh implementasi langsung di CodePen. Kalau kamu ingin hasil lebih cepat tanpa ribet, kamu juga bisa menggunakan layanan artikel SEO-friendly yang sudah siap pakai di sini 👇

ArtikelPro

Tagged with: