StickyBar is a jQuery plugin to make the element keep stayed in the visible area when the page is being scrolled.
StickyBar ialah plugin jQuery untuk membuat elemen selalu berada pada kawasan yang terlihat. Anda mungkin pernah melihat plugin semacam ini di luar sana. Jenisnya memang ada banyak, tapi mereka mempunyai beberapa keterbatasan dalam segi opsi dan keamanan. Di sini Saya telah menawarkan opsi-opsi penting aksesori yang lebih lengkap dan juga mencoba untuk menerapkan metode yang lebih aman:
Sebagian besar plugin sejenis hanya menerapkan posisi fixed pada elemen ketika elemen telah mencapai batas final area terlihat pada layar dan melepaskan posisinya jikalau elemen telah berada pada posisi awal. Bisa dilihat pada salah satu potongan arahan yang pernah Saya catat di sini. Padahal, menerapkan posisi fixed secara mendadak pada elemen sanggup menyebabkan struktur elemen di sekelilingnya menjadi rusak/berantakan disebabkan ruangan kawasan elemen yang menjadi sasaran telah kosong.
Ini terjadi lantaran perpindahan posisi elemen termanipulasi secara mendadak dari posisi static yang memakan ruang menjadi posisi fixed yang tidak memakan ruang.
Saat elemen termanipulasi berkembang menjadi fixed, maka elemen-elemen di sekelilingnya akan berloncatan berusaha menutupi kekosongan. Selain itu, posisi elemen static yang berkembang 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 sanggup mengubah posisi elemen menjadi melayang tanpa harus menghilangkan ruang asal elemen? Caranya ialah dengan memperbaharui nilai top secara terus-menerus menurut jarak gulungan layar. Cara ini akan membuat elemen seperti melayang:
Metode yang sama juga Saya pakai untuk membuat plugin ini. Keuntungannya, kita tidak perlu khawatir dengan keadaan posisi elemen di sekitar sasaran jikalau sasaran telah mengalami manipulasi, lantaran di sini plugin akan memanipulasi posisi elemen dengan tetap menjaga jenis posisinya sebagai posisi relative, sehingga betatapun jauh elemen berpindah dari elemen-elemen lain, beliau 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 tetapkan untuk menggunakan posisi fixed orisinil pada plugin ini lantaran beberapa kekurangan yang terjadi, namun tetap mempertahankan posisi fixed palsu untuk opsi StickyBar dengan pengaruh animasi.
Konfigurasi Plugin StickyBar
Letakkan jQuery, plugin StickyBar dan arahan sanksi di atas </head> dengan susunan ibarat ini, dan selesai sudah:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="//hompimpa.googlecode.com/svn/trunk/StickyBar/js/jquery.stickybar.min.js"></script> <script> $(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 memilih jarak atas elemen melayang (sticky element) |
| bottom | Digunakan untuk memilih jarak bawah elemen termanipulasi terhadap elemen penghenti. Secara umum tidak terlalu penting, jadi abaikan saja jikalau tidak perlu. |
| animated | Jika bernilai true, elemen akan melayang dengan pengaruh animasi. Demonya sanggup dilihat di sini |
| speed | Digunakan untuk memilih kecepatan animasi jikalau opsi animated bernilai true |
| easing | Digunakan untuk memilih tipe easing jQuery. Demonya sanggup dilihat di sini. Saya menggunakan tipe easing "easeOutElastic" |
| until | Digunakan untuk memilih elemen penghenti posisi melayang pada elemen termanipulasi. Sehingga jikalau elemen melayang telah menyentuh elemen penghenti, maka elemen tersebut akan berhenti melayang. Jika galau Anda sanggup melihat pola penerapannya di sini |
| fixedClass | Digunakan untuk memilih nama kelas elemen termanipulasi ketika elemen tersebut berada dalam kondisi fixed. |
| stoppedClass | Digunakan untuk memilih nama kelas elemen termanipulasi ketika elemen tersebut terhenti lantaran suatu elemen penghenti di bawahnya. |
| onFixed | Callback fungsi yang akan dijalankan jikalau elemen termanipulasi berada dalam kondisi fixed. |
| onStatic | Callback fungsi yang akan dijalankan jikalau elemen termanipulasi kembali pada posisi normal. |
| onStopped | Callback fungsi yang akan dijalankan jikalau elemen termanipulasi terhenti lantaran suatu elemen penghenti di bawahnya. |
Dua Macam Kelas Baru
Dua macam kelas gres akan diterapkan pada elemen yang dimanipulasi menurut keadaannya, yaitu kelas isFixed dan isStopped. Anda sanggup menggunakan kelas-kelas tersebut untuk membedakan tampilan elemen ketika 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 sanggup memilih sendiri nama kelas-kelas tersebut melalui opsi fixedClass dan stoppedClass:
$('#sidebar').stickyBar({ fixedClass: 'my-fixed-class', stoppedClass: 'my-stopped-class' });Efek pembedaan tanda menurut keadaan elemen sanggup Anda lihat dengan gampang pada demo StickyBar - Limit