POSITION STICKY

Posisi sticky merupakan salah satu nilai dari property position dalam CSS. Dalam tutorial ini, kita akan membahas cara menerapkan posisi sticky dan kapan waktu yang tepat untuk menggunakannya.

Pengertian Position Sticky

Posisi sticky adalah kombinasi antara posisi relatif dan posisi tetap. Sebuah elemen dengan posisi sticky akan bergulir seperti normal hingga mencapai titik tertentu yang kita tentukan. Setelah mencapai titik tersebut, elemen akan berperilaku seperti posisi tetap dan tetap berada di posisi itu meski halaman kita gulir.

Bagaimana cara menetapkannya? Kita tinggal menambahkan property position: sticky; pada elemen yang diinginkan, lalu tentukan nilai offset dengan top, right, bottom, atau left.

Contoh:

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

Dalam contoh di atas, elemen dengan kelas .sticky akan berubah menjadi sticky setelah kamu menggulir dan elemen tersebut mencapai tepi atas dari viewport.

Browser Support

Sebelum menerapkan posisi sticky, penting untuk mengetahui bahwa tidak semua browser mendukung fitur ini. Saat ini, posisi sticky sudah didukung oleh semua browser modern termasuk Chrome, Firefox, Safari, dan Edge.

Untuk browser yang tidak mendukung posisi sticky, kamu bisa menggunakan fallback dalam bentuk posisi lain seperti relatif atau tetap. Namun, perilaku dari fallback ini tentu saja tidak akan sama seperti posisi sticky.

Kapan Menggunakan Position Sticky?

Posisi sticky sangat berguna untuk tata letak yang ingin elemen tertentu tetap terlihat saat pengguna menggulir halaman. Beberapa contoh penggunaan umum dari posisi sticky adalah header website, suatu bar navigasi, atau bahkan sebuah tabel yang perlu selalu terlihat oleh pengguna saat mereka menggulir konten.

Namun, perlu diperhatikan juga bahwa posisi sticky dapat berdampak pada performa halaman jika digunakan berlebihan. Jadi, selalu gunakan posisi sticky secara bijaksana dan selalu melakukan uji coba terhadap performa halaman.