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
scroll
pada 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
top
yang Anda inginkan. Ini bisa dilakukan dengan memeriksa nilaigetBoundingClientRect().top
dari elemen sticky relatif terhadap viewport atau elemen scrolling ancestor. - 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):
<!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-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.
- 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 eventscroll
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 kelasactive
ke elemen sticky untuk menerapkan style yang berbeda.stickyNav.removeClass('active')
: Menghapus kelasactive
jika 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.offsetTop
untuk mendapatkan posisi top awal.window.addEventListener('scroll', ...)
untuk menambahkan event listener.window.scrollY
untuk 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