Mecha versi 2.6.3 sudah dirilis!

StickyBar jQuery Plugin

Tabel Konten
  1. Konfigurasi Plugin StickyBar 
    1. Opsi Lanjutan 
    2. Dua Macam Kelas Baru 
    3. Demo Lain 

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 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 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() {}
});
OpsiKeterangan
topDigunakan untuk menentukan jarak atas elemen melayang (sticky element)
bottomDigunakan untuk menentukan jarak bawah elemen termanipulasi terhadap elemen penghenti. Secara umum tidak terlalu penting, jadi abaikan saja jika tidak perlu.
animatedJika bernilai true, elemen akan melayang dengan efek animasi. Demonya bisa dilihat di sini
speedDigunakan untuk menentukan kecepatan animasi jika opsi animated bernilai true
easingDigunakan untuk menentukan tipe easing jQuery. Demonya bisa dilihat di sini. Saya memakai tipe easing "easeOutElastic"
untilDigunakan 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
fixedClassDigunakan untuk menentukan nama kelas elemen termanipulasi saat elemen tersebut berada dalam kondisi fixed.
stoppedClassDigunakan untuk menentukan nama kelas elemen termanipulasi saat elemen tersebut terhenti karena suatu elemen penghenti di bawahnya.
onFixedCallback fungsi yang akan dijalankan jika elemen termanipulasi berada dalam kondisi fixed.
onStaticCallback fungsi yang akan dijalankan jika elemen termanipulasi kembali pada posisi normal.
onStoppedCallback 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 

70 Komentar

Unknown

Mass saya minta tolong, untuk mengatasi masalah di atas bagaimana?

Maaf saya masih newbie
untuk blog saya mas bisa buka di sini

Salam kenal ea mas, maas saya masih newbie. :'(

Taufik Nurrohman

Perbesar nilai z-index pada navigasi. Ditaruh di dalam kelas sticky juga boleh:

.isFixed {z-index:9999}

Unknown

kok gk work ya mas taufik, emng scriptnya si pasang di mana yang opsi lanjutan ?? :(

Unknown

sudah di terapkan di atas kode < / head > namun tidak bekerja bung taufik, ada solusi ??? :D

Unknown

min, minta tolong koreksikan dong, ini kok gak bekerja?


.isFixed {
position:fixed !important;z-index:99;
}
.isStopped {
position:relative !important;
}
http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
http://hompimpa.googlecode.com/svn/trunk/StickyBar/js/jquery.stickybar.min.js
$(function() {
$('#HTML9').stickyBar({
animated: false,
speed: 400,
easing: null,
top: 0,
bottom: 0,
until: "#footer",
fixedClass: 'isFixed',
stoppedClass: 'isStopped',
onFixed: function() {},
onStatic: function() {},
onStopped: function() {}
});
/head

Taufik Nurrohman

Tambahkan satu }); lagi di baris paling bawah. Biasakan menulis kode pakai indentasi, supaya bisa tahu mana region kode yang belum tertutup dengan benar.