CSS position sticky Arsip - Farhanhidayat.com https://farhanhidayat.com/tag/css-position-sticky/ Mon, 20 Apr 2026 08:52:38 +0000 id hourly 1 https://wordpress.org/?v=6.9.4 https://farhanhidayat.com/wp-content/uploads/2024/11/cropped-Favicon-Farhanhidayat-32x32.png CSS position sticky Arsip - Farhanhidayat.com https://farhanhidayat.com/tag/css-position-sticky/ 32 32 Cara Mudah Membuat Sticky Navbar Saat Scroll (HTML & CSS) https://farhanhidayat.com/cara-membuat-sticky-navbar/ https://farhanhidayat.com/cara-membuat-sticky-navbar/#respond Mon, 20 Apr 2026 08:52:38 +0000 https://farhanhidayat.com/?p=2448 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. Apa Itu Sticky Navbar dan Kenapa Penting? Sticky navbar adalah menu navigasi yang tetap “menempel” di bagian atas […]

Artikel Cara Mudah Membuat Sticky Navbar Saat Scroll (HTML & CSS) pertama kali tampil pada Farhanhidayat.com.

]]> 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.

Apa Itu Sticky Navbar dan Kenapa Penting?

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.

Persiapan Sebelum Membuat Sticky Navbar

Struktur Dasar HTML Navbar

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

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.

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

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

Cara Membuat Sticky Navbar dengan CSS

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.

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;
}

Contoh Kode Sticky Navbar

Berikut contoh lengkapnya:

<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.

Alternatif: Sticky Navbar dengan position: fixed

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

Contoh Implementasi Fixed Navbar

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

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

Contoh Tampilan Sticky Navbar yang Responsive

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

1. Apa bedanya sticky dan fixed navbar?

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

2. Kenapa navbar tidak tetap saat di-scroll?

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

Artikel Cara Mudah Membuat Sticky Navbar Saat Scroll (HTML & CSS) pertama kali tampil pada Farhanhidayat.com.

]]> https://farhanhidayat.com/cara-membuat-sticky-navbar/feed/ 0