sticky navbar Arsip - Farhanhidayat.com https://farhanhidayat.com/tag/sticky-navbar/ Wed, 06 May 2026 07:21:12 +0000 id hourly 1 https://wordpress.org/?v=7.0 https://farhanhidayat.com/wp-content/uploads/2024/11/cropped-Favicon-Farhanhidayat-32x32.png sticky navbar Arsip - Farhanhidayat.com https://farhanhidayat.com/tag/sticky-navbar/ 32 32 Panduan Membuat Navbar Transparan ke Solid Saat Scroll https://farhanhidayat.com/panduan-membuat-navbar-transparan-ke-solid-saat-scroll/ https://farhanhidayat.com/panduan-membuat-navbar-transparan-ke-solid-saat-scroll/#respond Wed, 06 May 2026 07:21:12 +0000 https://farhanhidayat.com/?p=2528 Mau bikin tampilan website kamu terasa lebih modern dan profesional? Salah satu trik yang sering dipakai adalah membuat navbar transparan saat scroll yang berubah jadi solid. Selain terlihat keren, efek ini juga bikin navigasi tetap jelas saat user mulai menjelajah halaman. Di artikel ini, kamu bakal langsung belajar cara membuatnya dengan langkah yang simpel, tanpa […]

Artikel Panduan Membuat Navbar Transparan ke Solid Saat Scroll pertama kali tampil pada Farhanhidayat.com.

]]> Mau bikin tampilan website kamu terasa lebih modern dan profesional? Salah satu trik yang sering dipakai adalah membuat navbar transparan saat scroll yang berubah jadi solid. Selain terlihat keren, efek ini juga bikin navigasi tetap jelas saat user mulai menjelajah halaman.

Di artikel ini, kamu bakal langsung belajar cara membuatnya dengan langkah yang simpel, tanpa ribet, dan bisa langsung dipakai di project kamu.

Preview Navbar Transparan Saat Scroll (Hasil Akhir)

Sebelum masuk ke coding, bayangkan dulu hasil akhirnya.

Saat pertama kali halaman dibuka, navbar terlihat transparan dan menyatu dengan background. Namun, ketika user mulai scroll ke bawah, navbar berubah menjadi solid dengan warna yang lebih tegas. Selain itu, transisinya terasa halus, jadi tidak terlihat kaku.

Dengan efek ini, tampilan website jadi:

  • Lebih clean di bagian atas
  • Lebih profesional
  • Lebih nyaman saat navigasi

Cara Membuat Navbar Transparan ke Solid Saat Scroll

Sekarang kita langsung masuk ke bagian utama. Ikuti step by step di bawah ini.

1. Struktur HTML Navbar

Pertama, kamu perlu membuat struktur navbar sederhana.

<nav id="navbar">
  <h1>MyWebsite</h1>
</nav>

Pastikan kamu memberi id atau class agar mudah dikontrol lewat CSS dan JavaScript.

2. Styling CSS (Transparan & Solid)

Selanjutnya, kita atur tampilan navbar.

#navbar {
  position: fixed;
  width: 100%;
  padding: 20px;
  transition: all 0.3s ease;
  background: transparent;
}

#navbar.active {
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

Di sini, navbar awalnya transparan. Namun, ketika class active ditambahkan, background berubah jadi solid. Selain itu, kita tambahkan transition supaya perubahan terlihat smooth.

3. Tambahkan Efek Scroll dengan JavaScript

Setelah styling siap, sekarang kita aktifkan efek scroll.

window.addEventListener("scroll", function() {
  const navbar = document.getElementById("navbar");
  
  if (window.scrollY > 50) {
    navbar.classList.add("active");
  } else {
    navbar.classList.remove("active");
  }
});

Logikanya sederhana. Ketika user scroll lebih dari 50px, class active ditambahkan. Sebaliknya, saat kembali ke atas, class tersebut dihapus.

Contoh Kode Lengkap (Siap Copy-Paste)

Supaya lebih jelas, berikut versi lengkapnya.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Navbar Transparan ke Solid Saat Scroll</title>

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

    body {
      background-color: #f5f7fb;
      color: #222;
    }

    /* Navbar */
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      padding: 20px 8%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 999;
      background: transparent;
      transition: all 0.3s ease;
    }

    /* Navbar saat discroll */
    .navbar.scrolled {
      background: #ffffff;
      padding: 14px 8%;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

    .logo {
      font-size: 24px;
      font-weight: bold;
      color: #ffffff;
      text-decoration: none;
      transition: color 0.3s ease;
    }

    .navbar.scrolled .logo {
      color: #111827;
    }

    .nav-menu {
      display: flex;
      gap: 30px;
      list-style: none;
    }

    .nav-menu li a {
      color: #ffffff;
      text-decoration: none;
      font-size: 15px;
      font-weight: 500;
      transition: color 0.3s ease;
    }

    .navbar.scrolled .nav-menu li a {
      color: #111827;
    }

    .nav-menu li a:hover {
      color: #2563eb;
    }

    .btn-navbar {
      padding: 10px 18px;
      border: 1px solid #ffffff;
      border-radius: 8px;
      color: #ffffff;
      text-decoration: none;
      transition: all 0.3s ease;
      font-size: 14px;
      font-weight: 600;
    }

    .navbar.scrolled .btn-navbar {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }

    .btn-navbar:hover {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }

    /* Hero Section */
    .hero {
      min-height: 100vh;
      background: linear-gradient(
          rgba(0, 0, 0, 0.45),
          rgba(0, 0, 0, 0.45)
        ),
        url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1600&q=80");
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      padding: 0 8%;
      color: #ffffff;
    }

    .hero-content {
      max-width: 600px;
    }

    .hero-content h1 {
      font-size: 54px;
      line-height: 1.2;
      margin-bottom: 20px;
    }

    .hero-content p {
      font-size: 18px;
      line-height: 1.7;
      margin-bottom: 30px;
      color: #e5e7eb;
    }

    .hero-content .btn-hero {
      display: inline-block;
      padding: 14px 26px;
      background: #2563eb;
      color: #ffffff;
      text-decoration: none;
      border-radius: 10px;
      font-weight: 600;
      transition: 0.3s ease;
    }

    .hero-content .btn-hero:hover {
      background: #1d4ed8;
      transform: translateY(-3px);
    }

    /* Content Section */
    .section {
      padding: 90px 8%;
      background: #ffffff;
    }

    .section-title {
      text-align: center;
      margin-bottom: 50px;
    }

    .section-title span {
      color: #2563eb;
      font-weight: bold;
      font-size: 14px;
      letter-spacing: 1px;
    }

    .section-title h2 {
      font-size: 38px;
      margin-top: 10px;
      color: #111827;
    }

    .section-title p {
      margin-top: 15px;
      color: #6b7280;
      font-size: 16px;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 25px;
    }

    .card {
      background: #ffffff;
      padding: 30px;
      border-radius: 18px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
      transition: 0.3s ease;
    }

    .card:hover {
      transform: translateY(-8px);
    }

    .card-icon {
      width: 55px;
      height: 55px;
      background: #eff6ff;
      color: #2563eb;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      font-size: 24px;
      margin-bottom: 20px;
    }

    .card h3 {
      font-size: 22px;
      margin-bottom: 12px;
      color: #111827;
    }

    .card p {
      color: #6b7280;
      line-height: 1.6;
      font-size: 15px;
    }

    /* Footer */
    footer {
      padding: 30px 8%;
      text-align: center;
      background: #111827;
      color: #ffffff;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .navbar {
        padding: 18px 5%;
      }

      .navbar.scrolled {
        padding: 12px 5%;
      }

      .nav-menu {
        display: none;
      }

      .hero {
        padding: 0 5%;
      }

      .hero-content h1 {
        font-size: 38px;
      }

      .hero-content p {
        font-size: 16px;
      }

      .cards {
        grid-template-columns: 1fr;
      }

      .section-title h2 {
        font-size: 30px;
      }
    }
  </style>
</head>
<body>

  <!-- Navbar -->
  <nav class="navbar" id="navbar">
    <a href="#" class="logo">MetroBuild</a>

    <ul class="nav-menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Features</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">About</a></li>
    </ul>

    <a href="#" class="btn-navbar">Get Started</a>
  </nav>

  <!-- Hero Section -->
  <section class="hero">
    <div class="hero-content">
      <h1>Build Better<br />Together.</h1>
      <p>
        Tampilan website modern dengan navbar transparan yang berubah menjadi solid saat halaman di-scroll.
      </p>
      <a href="#" class="btn-hero">Explore Projects</a>
    </div>
  </section>

  <!-- Content Section -->
  <section class="section">
    <div class="section-title">
      <span>FEATURES</span>
      <h2>Everything You Need</h2>
      <p>Contoh hasil akhir navbar setelah user melakukan scroll halaman.</p>
    </div>

    <div class="cards">
      <div class="card">
        <div class="card-icon">⚡</div>
        <h3>Fast Performance</h3>
        <p>
          Navbar dibuat ringan menggunakan HTML, CSS, dan JavaScript sederhana.
        </p>
      </div>

      <div class="card">
        <div class="card-icon">🛡️</div>
        <h3>Clean Design</h3>
        <p>
          Desain minimalis, modern, dan cocok untuk website company profile atau landing page.
        </p>
      </div>

      <div class="card">
        <div class="card-icon">💻</div>
        <h3>Easy to Customize</h3>
        <p>
          Warna, ukuran, menu, dan efek scroll dapat diubah sesuai kebutuhan website.
        </p>
      </div>
    </div>
  </section>

  <footer>
    <p>© 2026 MetroBuild. All rights reserved.</p>
  </footer>

  <!-- JavaScript -->
  <script>
    const navbar = document.getElementById("navbar");

    window.addEventListener("scroll", function () {
      if (window.scrollY > 50) {
        navbar.classList.add("scrolled");
      } else {
        navbar.classList.remove("scrolled");
      }
    });
  </script>

</body>
</html>

Dengan kode ini, kamu sudah bisa langsung melihat efek navbar transparan saat scroll berubah menjadi solid.

Kenapa Navbar Tidak Berubah Saat Scroll? (Masalah Umum)

Walaupun terlihat sederhana, efek navbar transparan saat scroll kadang tidak berjalan seperti yang diharapkan. Karena itu, penting untuk memahami beberapa penyebab umum berikut.

  • JavaScript tidak berjalan dengan benar
    Biasanya ini terjadi karena file script belum terhubung atau terdapat error di dalam kode.
  • Selector tidak sesuai
    Pastikan “id” atau “class” di HTML sama dengan yang dipanggil di JavaScript. Kesalahan kecil di sini bisa membuat efek tidak aktif.
  • Tidak menggunakan “position: fixed” atau “sticky”
    Tanpa properti ini, navbar tidak akan “menempel” saat scroll, sehingga perubahan tidak terlihat.
  • Nilai scroll tidak tepat
    Jika nilai “scrollY” terlalu kecil atau terlalu besar, efek bisa terasa tidak responsif atau bahkan tidak muncul sama sekali.

Tips Biar Efek Navbar Lebih Smooth & Profesional

Supaya hasil akhir terlihat lebih halus dan modern, kamu bisa menerapkan beberapa tips berikut.

  • Gunakan transition yang halus
    Misalnya “transition: 0.3s ease;” agar perubahan tidak terasa kaku.
  • Tambahkan efek shadow saat navbar solid
    Shadow membantu memberikan depth sehingga navbar terlihat lebih menonjol dari konten.
  • Manfaatkan efek blur (backdrop-filter)
    Jika background cukup kompleks, efek blur bisa memberikan tampilan yang lebih modern dan elegan.
  • Pastikan kontras warna tetap jelas
    Jangan sampai teks di navbar sulit dibaca setelah berubah menjadi solid.
  • Optimalkan untuk tampilan mobile
    Karena sebagian besar user menggunakan smartphone, pastikan navbar tetap responsif dan nyaman digunakan di berbagai ukuran layar.

Kesimpulan

Membuat navbar transparan saat scroll sebenarnya tidak sulit. Dengan kombinasi HTML, CSS, dan JavaScript sederhana, kamu sudah bisa menciptakan efek yang sering dipakai di website modern.

Selain itu, efek ini bukan hanya soal tampilan, tapi juga meningkatkan pengalaman pengguna. Jadi, kalau kamu ingin website terlihat lebih profesional, fitur ini wajib kamu coba.

FAQ

1. Apakah bisa tanpa JavaScript?

Bisa, tetapi efeknya terbatas. Untuk perubahan dinamis saat scroll, JavaScript tetap jadi pilihan terbaik.

2. Kenapa efek navbar tidak smooth?

Biasanya karena tidak menggunakan transition atau durasinya terlalu cepat.

3. Apakah efek ini berat untuk website?

Tidak, selama kamu menggunakan script sederhana seperti contoh di atas.

Artikel Panduan Membuat Navbar Transparan ke Solid Saat Scroll pertama kali tampil pada Farhanhidayat.com.

]]> https://farhanhidayat.com/panduan-membuat-navbar-transparan-ke-solid-saat-scroll/feed/ 0 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