StickyBar JQuery Plugin

StickyBar is a JQuery plugin to make the element keep stayed in the visible area when the page is being scrolled.

StickyBar JQuery Plugin

StickyBar adalah plugin JQuery untuk membuat elemen selalu berada pada tempat yang terlihat. Anda mungkin pernah melihat plugin semacam ini di luar sana. Jenisnya memang ada banyak, tapi mereka memiliki beberapa keterbatasan dalam segi opsi dan keamanan. Di sini Saya telah memberikan opsi-opsi penting tambahan yang lebih lengkap dan juga mencoba untuk menerapkan metode yang lebih aman:

Lihat Demo Unduh Plugin Unduh Plugin (Minified)

Sebagian besar plugin sejenis hanya menerapkan posisi fixed pada elemen ketika elemen telah mencapai batas akhir area terlihat pada layar dan melepaskan posisinya jika elemen telah berada pada posisi awal. Bisa dilihat pada salah satu potongan kode yang pernah Saya catat di sini.
Padahal, menerapkan posisi fixed secara mendadak pada elemen bisa menyebabkan struktur elemen di sekelilingnya menjadi rusak/berantakan disebabkan ruangan tempat elemen yang menjadi target telah kosong.

Ini terjadi karena perpindahan posisi elemen termanipulasi secara mendadak dari posisi static yang memakan ruang menjadi posisi fixed yang tidak memakan ruang.

Saat elemen termanipulasi berubah menjadi fixed, maka elemen-elemen di sekelilingnya akan berloncatan berusaha menutupi kekosongan. Selain itu, posisi elemen static yang berubah menjadi fixed juga akan mengalami perubahan posisi dalam segi koordinat (terutama posisi atas dan kiri) sehingga kita akan membutuhkan lebih banyak perhitungan untuk itu. Intinya: terlalu rumit!

Lalu bagaimana kita bisa mengubah posisi elemen menjadi melayang tanpa harus menghilangkan ruang asal elemen? Caranya adalah dengan memperbaharui nilai top secara terus-menerus berdasarkan jarak gulungan layar. Cara ini akan membuat elemen seolah-olah melayang:

Lihat Konsep Dasar

Metode yang sama juga Saya pakai untuk menciptakan plugin ini. Keuntungannya, kita tidak perlu khawatir dengan keadaan posisi elemen di sekitar target jika target telah mengalami manipulasi, karena di sini plugin akan memanipulasi posisi elemen dengan tetap menjaga jenis posisinya sebagai posisi relative, sehingga betatapun jauh elemen berpindah dari elemen-elemen lain, dia tidak akan mengganggu posisi elemen yang lain dan tidak akan mengosongkan ruang asalnya. (Ingat: top, right, bottom dan left berbeda dengan margin-top, margin-right, margin-bottom dan margin-left).

Pembaharuan: Saya memutuskan untuk menggunakan posisi fixed asli pada plugin ini karena beberapa kekurangan yang terjadi, namun tetap mempertahankan posisi fixed palsu untuk opsi StickyBar dengan efek animasi.

---

Konfigurasi Plugin StickyBar

Letakkan JQuery, plugin StickyBar dan kode eksekusi di atas </head> dengan susunan seperti ini, dan selesai sudah:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://hompimpa.googlecode.com/svn/trunk/StickyBar/js/jquery.stickybar.min.js"></script>
<script type="text/javascript">
$(function() {
    $('#sidebar').stickyBar();
});
</script>

Opsi Lanjutan

Terdapat beberapa opsi lanjutan pada plugin ini:

$('#sidebar').stickyBar({
    animated: false,
    speed: 400,
    easing: null,
    top: 0,
    bottom: 0,
    until: "",
    fixedClass: 'isFixed',
    stoppedClass: 'isStopped',
    onFixed: function() {},
    onStatic: function() {},
    onStopped: function() {}
});

Opsi	Keterangan
top	Digunakan untuk menentukan jarak atas elemen melayang (sticky element)
bottom	Digunakan untuk menentukan jarak bawah elemen termanipulasi terhadap elemen penghenti. Secara umum tidak terlalu penting, jadi abaikan saja jika tidak perlu.
animated	Jika bernilai true, elemen akan melayang dengan efek animasi. Demonya bisa dilihat di sini
speed	Digunakan untuk menentukan kecepatan animasi jika opsi animated bernilai true
easing	Digunakan untuk menentukan tipe easing JQuery. Demonya bisa dilihat di sini. Saya memakai tipe easing "easeOutElastic"
until	Digunakan untuk menentukan elemen penghenti posisi melayang pada elemen termanipulasi. Sehingga jika elemen melayang telah menyentuh elemen penghenti, maka elemen tersebut akan berhenti melayang. Jika bingung Anda bisa melihat contoh penerapannya di sini
fixedClass	Digunakan untuk menentukan nama kelas elemen termanipulasi saat elemen tersebut berada dalam kondisi fixed.
stoppedClass	Digunakan untuk menentukan nama kelas elemen termanipulasi saat elemen tersebut terhenti karena suatu elemen penghenti di bawahnya.
onFixed	Callback fungsi yang akan dijalankan jika elemen termanipulasi berada dalam kondisi fixed.
onStatic	Callback fungsi yang akan dijalankan jika elemen termanipulasi kembali pada posisi normal.
onStopped	Callback fungsi yang akan dijalankan jika elemen termanipulasi terhenti karena suatu elemen penghenti di bawahnya.

Dua Macam Kelas Baru

Dua macam kelas baru akan diterapkan pada elemen yang dimanipulasi berdasarkan keadaannya, yaitu kelas isFixed dan isStopped. Anda bisa menggunakan kelas-kelas tersebut untuk membedakan tampilan elemen saat berada dalam keadaan normal, keadaan melayang atau dalam keadaan terhenti oleh elemen penghenti melalui CSS:

.isFixed {
  /* Kode CSS tampilan elemen melayang... */
}
.isStopped {
  /* Kode CSS tampilan elemen terhenti... */
}

Atau, Anda juga bisa menentukan sendiri nama kelas-kelas tersebut melalui opsi fixedClass dan stoppedClass:

$('#sidebar').stickyBar({
    fixedClass: 'my-fixed-class',
    stoppedClass: 'my-stopped-class'
});

Efek pembedaan tanda berdasarkan keadaan elemen bisa Anda lihat dengan mudah pada demo StickyBar - Limit

Demo Lain

• StickyBar - Another Test