Jumat, April 18, 2025

CSS Navbar Sticky Top

 Untuk mengubah style elemen dengan position: sticky saat elemen tersebut mencapai posisi top tertentu, Anda memerlukan sedikit bantuan dari JavaScript. CSS saja tidak memiliki mekanisme bawaan untuk mengubah style berdasarkan posisi sticky yang aktif.

Berikut adalah cara Anda dapat melakukannya menggunakan JavaScript:

Konsep Dasar:

  1. Pilih Elemen Sticky: Dapatkan referensi ke elemen yang memiliki position: sticky.
  2. Dengarkan Event Scroll: Tambahkan event listener untuk event scroll pada window atau elemen scrolling ancestor dari elemen sticky.
  3. Periksa Posisi Sticky: Di dalam event listener, Anda perlu menentukan apakah elemen sticky saat ini berada pada posisi top yang Anda inginkan. Ini bisa dilakukan dengan memeriksa nilai getBoundingClientRect().top dari elemen sticky relatif terhadap viewport atau elemen scrolling ancestor.
  4. Ubah Style: Jika posisi top yang ditentukan tercapai, tambahkan atau hapus kelas CSS pada elemen sticky untuk mengubah style-nya.

Contoh Implementasi (JavaScript dengan jQuery):

HTML
<!DOCTYPE html>
<html>
<head>
<title>Position Sticky Change Style on Top</title>
<style>
body {
  height: 1500px; /* Membuat konten yang cukup untuk di-scroll */
  margin: 0;
}

.sticky-nav {
  position: sticky;
  top: 0; /* Elemen akan menempel di bagian atas */
  background-color: #f0f0f0;
  padding: 10px;
  text-align: center;
  transition: background-color 0.3s ease; /* Efek transisi halus */
}

.sticky-nav.active {
  background-color: lightgreen; /* Style saat mencapai top: 0 */
  font-weight: bold;
}

.content {
  padding: 20px;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div class="sticky-nav">
  Ini adalah navigasi sticky.
</div>

<div class="content">
  <p>Scroll ke bawah dan lihat bagaimana style navigasi berubah saat mencapai bagian atas.</p>
  <div style="height: 1000px;"></div>
</div>

<script>
$(document).ready(function() {
  var stickyNav = $('.sticky-nav');
  var stickyTopOffset = stickyNav.offset().top; // Posisi top awal elemen sticky

  $(window).scroll(function() {
    var scrollTop = $(window).scrollTop();

    // Periksa apakah posisi scroll mencapai atau melewati posisi top awal elemen sticky
    if (scrollTop >= stickyTopOffset) {
      stickyNav.addClass('active');
    } else {
      stickyNav.removeClass('active');
    }
  });
});
</script>

</body>
</html>

Penjelasan:

  1. HTML:

    • Elemen dengan kelas sticky-nav akan menjadi elemen sticky. top: 0; membuatnya menempel di bagian atas.
    • Kelas active akan ditambahkan atau dihapus untuk mengubah style.
    • Konten yang cukup panjang dibuat agar bisa di-scroll.
  2. CSS:

    • .sticky-nav: Style dasar untuk elemen sticky.
    • .sticky-nav.active: Style yang akan diterapkan saat elemen berada di posisi top: 0; (atau lebih tepatnya, saat bagian atas elemen mencapai bagian atas viewport).
    • transition: Efek transisi opsional untuk perubahan style yang lebih halus.
  3. JavaScript (jQuery):

    • stickyNav: Memilih elemen dengan kelas sticky-nav.
    • stickyTopOffset: Mendapatkan jarak elemen sticky dari bagian atas dokumen saat halaman pertama kali dimuat.
    • $(window).scroll(): Menambahkan event listener untuk event scroll pada jendela browser.
    • scrollTop: Mendapatkan posisi scroll vertikal saat ini.
    • Kondisi if (scrollTop >= stickyTopOffset): Memeriksa apakah posisi scroll saat ini lebih besar atau sama dengan posisi top awal elemen sticky. Ketika ini benar, berarti elemen sticky telah mencapai atau melewati bagian atas viewport dan menjadi "stuck".
    • stickyNav.addClass('active'): Menambahkan kelas active ke elemen sticky untuk menerapkan style yang berbeda.
    • stickyNav.removeClass('active'): Menghapus kelas active jika pengguna scroll kembali ke atas sehingga elemen sticky tidak lagi "stuck" di bagian atas.

Contoh Implementasi (JavaScript Vanilla):

HTML
<!DOCTYPE html>
<html>
<head>
<title>Position Sticky Change Style on Top</title>
<style>
body {
  height: 1500px;
  margin: 0;
}

.sticky-nav {
  position: sticky;
  top: 0;
  background-color: #f0f0f0;
  padding: 10px;
  text-align: center;
  transition: background-color 0.3s ease;
}

.sticky-nav.active {
  background-color: lightgreen;
  font-weight: bold;
}

.content {
  padding: 20px;
}
</style>
</head>
<body>

<div class="sticky-nav">
  Ini adalah navigasi sticky.
</div>

<div class="content">
  <p>Scroll ke bawah dan lihat bagaimana style navigasi berubah saat mencapai bagian atas.</p>
  <div style="height: 1000px;"></div>
</div>

<script>
  const stickyNav = document.querySelector('.sticky-nav');
  const stickyTopOffset = stickyNav.offsetTop;

  window.addEventListener('scroll', () => {
    const scrollTop = window.scrollY;

    if (scrollTop >= stickyTopOffset) {
      stickyNav.classList.add('active');
    } else {
      stickyNav.classList.remove('active');
    }
  });
</script>

</body>
</html>

Penjelasan (JavaScript Vanilla):

  • Kode JavaScript vanilla melakukan hal yang serupa dengan contoh jQuery, tetapi menggunakan metode DOM standar:
    • document.querySelector('.sticky-nav') untuk memilih elemen.
    • stickyNav.offsetTop untuk mendapatkan posisi top awal.
    • window.addEventListener('scroll', ...) untuk menambahkan event listener.
    • window.scrollY untuk mendapatkan posisi scroll.
    • stickyNav.classList.add('active') dan stickyNav.classList.remove('active') untuk memanipulasi kelas CSS.

Penerapan untuk Posisi Top yang Berbeda:

Jika Anda ingin mengubah style saat elemen sticky mencapai posisi top yang berbeda (misalnya, top: 50px;), Anda perlu menyesuaikan kondisi di dalam event listener. Alih-alih membandingkan dengan stickyTopOffset, Anda bisa langsung memeriksa nilai getBoundingClientRect().top.

Contoh (Mengubah style saat top elemen sticky menjadi 50px dari atas viewport):

JavaScript
window.addEventListener('scroll', () => {
  const rect = stickyNav.getBoundingClientRect();
  if (rect.top <= 50) {
    stickyNav.classList.add('active');
  } else {
    stickyNav.classList.remove('active');
  }
});

Ingatlah untuk memilih pendekatan JavaScript yang sesuai dengan kebutuhan proyek Anda (menggunakan library seperti jQuery atau vanilla JavaScript). Pastikan juga untuk mempertimbangkan kinerja jika Anda memiliki banyak elemen sticky atau konten yang sangat panjang, karena event scroll dapat dipicu berkali-kali. Anda mungkin perlu melakukan throttling atau debouncing pada fungsi event listener jika diperlukan.


https://g.co/gemini/share/f0ef0ce4a01c

Tidak ada komentar:

Posting Komentar

PHP Google Drive

https://g.co/gemini/share/4ec33b801d4a   Tentu, saya akan membantu Anda membuat kode PHP menggunakan Composer untuk melakukan sinkronisasi (...