navbar transparan Arsip - Farhanhidayat.com https://farhanhidayat.com/tag/navbar-transparan/ Wed, 06 May 2026 07:21:12 +0000 id hourly 1 https://wordpress.org/?v=6.9.4 https://farhanhidayat.com/wp-content/uploads/2024/11/cropped-Favicon-Farhanhidayat-32x32.png navbar transparan Arsip - Farhanhidayat.com https://farhanhidayat.com/tag/navbar-transparan/ 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