Home Coding Panduan Membuat Navbar Transparan ke Solid Saat Scroll

Panduan Membuat Navbar Transparan ke Solid Saat Scroll

Farhan Hidayat 6 Mei 2026 8 min read

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.

Sebelum masuk ke coding, bayangkan dulu hasil akhirnya.

Also Read: Micro Interaction CSS: 10 Efek UI agar Website Lebih Interaktif

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

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

Also Read: 5 Contoh Animasi Cursor Custom untuk UI Website Interaktif

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.

Also Read: Cara Membuat Parallax Scrolling Effect dengan Mudah

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

Also Read: 7 Skeleton Screen yang Membuat Website Terasa Lebih Cepat

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.

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

Also Read: Cara Membuat Image Gallery Responsive dengan HTML CSS

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.

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.