Perbedaan antara Position Fixed dan Sticky dalam CSS

Ketika mendesain dan mengembangkan situs web, Anda sering akan menggunakan properti CSS seperti position: fixed dan position: sticky untuk mengendalikan perilaku elemen dalam layout halaman.

Kedua properti ini memungkinkan Anda untuk membuat elemen tetap di tempat tertentu saat pengguna menggulir halaman, tetapi mereka memiliki perbedaan utama dalam cara mereka berperilaku. Dalam artikel ini, kita akan memahami perbedaan antara kedua properti ini, serta memberikan contoh penggunaannya.

Fixed

Fixed adalah properti CSS yang digunakan untuk membuat elemen tetap di posisi yang ditentukan relatif terhadap viewport, atau area tampilan browser. Artinya, elemen tersebut akan tetap di tempat, bahkan ketika halaman digulir. Berikut adalah beberapa karakteristik utama dari position: fixed:

1. Elemen Tetap Terhadap Viewport: Elemen dengan position: fixed akan selalu tetap pada posisi yang ditentukan dalam viewport. Ini berarti elemen tersebut akan terlihat di tempat yang sama di layar, bahkan saat pengguna menggulir halaman.
2. Tidak Mempengaruhi Layout: Elemen dengan position: fixed tidak akan memengaruhi layout elemen lain di halaman. Ini berarti elemen tetap tidak akan mendorong atau menggeser elemen-elemen lain saat ditampilkan.

Contoh penggunaan umum untuk position: fixed adalah untuk membuat elemen seperti menu navigasi tetap terlihat di bagian atas atau sisi halaman selama pengguna menggulir. Berikut adalah contoh kode CSS dan HTML untuk membuat menu navigasi tetap di bagian atas halaman:

#menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 10px;
}

<div id="menu">
  <!-- Isi menu navigasi di sini -->
</div>

Sticky

Sticky adalah properti CSS yang memungkinkan elemen untuk berperilaku seperti elemen biasa sampai mencapai posisi tertentu dalam halaman, dan kemudian elemen tersebut akan “menempel” pada posisi tersebut dan tetap di sana saat pengguna menggulir. Berikut adalah beberapa karakteristik utama dari position: sticky:

1. Perilaku Dinamis: Elemen dengan position: sticky awalnya akan berperilaku seperti elemen biasa dalam layout dokumen. Namun, ketika mencapai posisi tertentu dalam halaman (biasanya ketika elemen tersebut melewati batas elemen lain dalam kontainer), elemen tersebut akan “menempel” pada posisi tersebut dan tetap di sana saat pengguna menggulir.
2. Interaksi dengan Layout: Elemen dengan position: sticky dapat berinteraksi dengan elemen-elemen lain dalam layout. Mereka dapat mendorong elemen-elemen lain ketika menempel pada posisi yang ditentukan.

Contoh penggunaan umum untuk position: sticky adalah untuk membuat elemen seperti header atau sidebar tetap di tempat selama pengguna menggulir sepanjang konten yang lebih panjang. Berikut adalah contoh kode CSS dan HTML untuk membuat header tetap di bagian atas halaman ketika digulir:

#header {
  position: sticky;
  top: 0;
  background-color: #fff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

<div id="header">
  <!-- Isi header di sini -->
</div>

Kesimpulan

Meskipun position: fixed dan position: sticky memiliki tujuan yang mirip dalam menjaga elemen tetap di halaman saat pengguna menggulir, mereka memiliki perbedaan dalam perilaku dasar. position: fixed akan membuat elemen tetap terhadap viewport, sementara position: sticky akan membuat elemen tetap pada posisi tertentu dalam kontainer dan berinteraksi dengan elemen lain dalam layout.

Dalam pengembangan web, pemahaman perbedaan ini membantu Anda memilih dengan bijak antara kedua properti ini sesuai dengan kebutuhan desain dan fungsionalitas situs web Anda.