jQuery Fixed Floating Element

jQuery Fixed Floating Element biasanya digunakan untuk mengatur posisi elemen atau widget agar selalu dalam posisi tetap walau halaman di scroll ke atas atau ke bawah. Pada beberapa kasus, biasanya digunakan untuk sidebar, menu navigasi, tombol share, footer atau bahkan header. Hal ini dimanfaatkan oleh para blogger untuk memfokuskan sesuatu agar perhatian pembaca tertuju pada isi elemen atau widget tersebut. Sebenarnya cara ini telah banyak dibahas oleh para blogger, ada yang menggunakan CSS murni namun tidak sedikit juga yang menggunakan perpaduan CSS dan jQuery. Pada artikel kali ini kita akan mencoba memanipulasi elemen menggunakan jQuery.

Demo jQuery Fixed Floating Element

Prinsip Dasar

Ada dua metode yang bisa digunakan untuk memanipulasi suatu elemen agar memiliki posisi tetap (fixed) pada halaman, diantaranya:

1. Mengubah nilai properti position dari position : relative | absolute menjadi position : fixed dengan manipulasi melalui kode jQuery.
2. Mengubah nilai properti top agar berubah secara kontinyu sesuai pergeseran halaman dengan manipulasi melalui kode jQuery.

Dari dua teknik diatas dapat kita ambil kesimpulan bahwa kode-kode jQuery di gunakan untuk memanipulasi properti-properti kode-kode CSS.

Skenario HTML - Identifikasi Elemen

Untuk membuat suatu elemen memiliki posisi mengambang tetap (fixed floating) maka langkah awal adalah menentukan elemen mana yang akan di ubah propertinya. Misal saya membuat sebuah studycase dengan skenario HTML seperti dibawah ini:

<div id="wrapper">
 <div id="header"></div>
 <div id="content"></div>
 <div id="sidebar"></div>
 <div id="footer"></div>
</div>

Kemudian bagian yang akan dibuat terapung tetap adalah bagian <div id="header">.

Skenario jQuery

Setelah elemen teridentifikasi maka selanjutnya adalah menuliskan script jQuery untuk memanipulasi elemen agar menjadi terapung ketika halaman di gulung ke bawah (scroll bottom) dan kembali pada posisi semula ketika halaman di gulung ke atas (scroll top). Maka kode jQuery ditulis seperti dibawah ini:

jQuery(document).ready(function(){
 var jQwadah = jQuery("#header");
 var jQluhur = jQwadah.offset().top;
 var jQatur = jQuery(document);
 
 jQuery(window).scroll(function() {
  cicing = jQatur.scrollTop() - jQluhur;
  if(cicing < 0)
   jQwadah.offset({top: jQluhur});
  else
   jQwadah.offset({top: jQatur.scrollTop() + 5});
 });
});

Prinsip Kerja Skenario jQuery

Dibawah ini dijelaskan baris per baris bagaimana script jQuery diatas bekerja.

var jQwadah = jQuery("#header");

Ini merupakan deklarasi variabel untuk menentukan elemen apa yang akan dibuat fixed float. #header bisa kita ganti sesuai kebutuhan, misal menjadi #sidebar. jQwadah berisi elemen #header yang akan dimanipulasi menjadi fixed float

var jQluhur = jQwadah.offset().top;

Ini digunakan untuk mendeklarasikan variabel untuk mengambil posisi koordinat top #header

var jQatur = jQuery(document);

Deklarasi bahwa fungsi jQuery untuk document di aktifkan

jQuery(window).scroll(function() {

Untuk menangkap scroll window (halaman) sehingga fungsi dimulai...

cicing = jQatur.scrollTop() - jQluhur;

Deklarasi variabel cicing yang berisi; pergerakan halaman dikurangi hasil tangkapan posisi top elemen

if(cicing < 0)

Jika cicing kurang dari 0 maka...

jQwadah.offset({top: jQluhur});

#header berada pada posisi asal...

else

jika tidak...

jQwadah.offset({top: jQatur.scrollTop() + 5});

posisi koordinat top #header akan di geser bertahap dengan penambahan + 5 pixel. + 5 diatur sesuai dengan margin #header


Selamat mencoba dan semoga berhasil... Happy Blogging :)

Pranala Luar:

1. jQuery .scroll()
2. jQuery .offset()
3. jQuery .scrollTop()