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:
- Pilih Elemen Sticky: Dapatkan referensi ke elemen yang memiliki
position: sticky. - Dengarkan Event Scroll: Tambahkan event listener untuk event
scrollpada window atau elemen scrolling ancestor dari elemen sticky. - Periksa Posisi Sticky: Di dalam event listener, Anda perlu menentukan apakah elemen sticky saat ini berada pada posisi
topyang Anda inginkan. Ini bisa dilakukan dengan memeriksa nilaigetBoundingClientRect().topdari elemen sticky relatif terhadap viewport atau elemen scrolling ancestor. - Ubah Style: Jika posisi
topyang ditentukan tercapai, tambahkan atau hapus kelas CSS pada elemen sticky untuk mengubah style-nya.
Contoh Implementasi (JavaScript dengan jQuery):
<!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:
-
HTML:
- Elemen dengan kelas
sticky-navakan menjadi elemen sticky.top: 0;membuatnya menempel di bagian atas. - Kelas
activeakan ditambahkan atau dihapus untuk mengubah style. - Konten yang cukup panjang dibuat agar bisa di-scroll.
- Elemen dengan kelas
-
CSS:
.sticky-nav: Style dasar untuk elemen sticky..sticky-nav.active: Style yang akan diterapkan saat elemen berada di posisitop: 0;(atau lebih tepatnya, saat bagian atas elemen mencapai bagian atas viewport).transition: Efek transisi opsional untuk perubahan style yang lebih halus.
-
JavaScript (jQuery):
stickyNav: Memilih elemen dengan kelassticky-nav.stickyTopOffset: Mendapatkan jarak elemen sticky dari bagian atas dokumen saat halaman pertama kali dimuat.$(window).scroll(): Menambahkan event listener untuk eventscrollpada 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 kelasactiveke elemen sticky untuk menerapkan style yang berbeda.stickyNav.removeClass('active'): Menghapus kelasactivejika pengguna scroll kembali ke atas sehingga elemen sticky tidak lagi "stuck" di bagian atas.
Contoh Implementasi (JavaScript Vanilla):
<!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.offsetTopuntuk mendapatkan posisi top awal.window.addEventListener('scroll', ...)untuk menambahkan event listener.window.scrollYuntuk mendapatkan posisi scroll.stickyNav.classList.add('active')danstickyNav.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):
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.
Tidak ada komentar:
Posting Komentar