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 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:
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:
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() {}
});
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
Labels: Desain, JavaScript, jQuery, Lanjutan
70 Comments:
asik jadi komentar perdana.. hehehe
ouh ia.. mengenai sticky .. kalau pengen menyembunyikan dulu lalu tampil saat di scroll ke bawah gimana om.. scriptnya apa yang musti di ubah...
Duh, Saya malah nggak kepikiran ke situ, jadi fiturnya tidak ada. Tapi nggak apa-apa, masih bisa diakali dengan kode JQuery di luar plugin.
Saat elemen berubah menjadi melayang, elemen akan disisipi kelas isFixed, jadi kita bisa menciptakan kondisi berdasarkan kehadiran kelas baru itu untuk menampilkan elemen yang disembunyikan:
if ($('div').hasClass('isFixed'))
Hasil akhirnya akan menjadi seperti ini:
$('div').css('opacity', 0).stickyBar(); // Buat jadi transparan
$(window).on("scroll", function() {
if ($('div').hasClass('isFixed')) {
// Tampilkan jika elemen memiliki kelas 'isFixed'
$('div').stop().animate({
opacity: 1
}, 400);
} else {
$('div').stop().animate({
opacity: 0
}, 100);
}
});
Demo: http://jsfiddle.net/tovic/st7Pj/1/
kalau misalkan penggunaan javascript seperti backtotop bisa di pakai gak om.. contoh nya script seperti ini. apa saat di terapkan pada blog. akan sempurna ..
$(window).on("scroll", function() {
var position = $(this).scrollTop();
$('nav').css('top', position);
if($(this).scrollTop() != 0) {
$('nav').fadeIn();
} else {
$('nav').fadeOut();
}
});
Demo : http://jsfiddle.net/denzdii/st7Pj/2/
soy mas bro. saya mau tanya, sticky nya bisa gak pergerakan gak kasar. maksudnya seperti googleblog.blogspot.com atau seperti ini codecanyon.net/item/jquery-css3-sticky-mega-menu-bar/full_screen_preview/239093
saya sudah mencoba memakai sticky ini pada menu saya, tapi ketika scrool diturunkan kebawah, kasar gitu sticky nya. nah kalau bisa masbro kasih tau gmana caranya buat sticky yang seperti codecanyon diatas tadi. kalau bisa saja. mohon dibantu.
maaf ni masbro, kalau bisa saja. kalau tidak bisa tidak apa apa. terimakasih ya udah baca koment saya. salam kenal
Salam kenal. Masih dalam tahap pengembangan :\
Plugin ini saja masih belum sempurna. Hehe :p
kebetulan yg masih saya pake adalah yg fixed dari dynamic drive , sprtinya yg ini lebih sempurna :-bd
padahal sudah top:0
tapi kok masih blom mepet ke atas ya mas?
http://jadikanpinter.blogspot.com
lihat bagian sidebar - Pilih Kategori
Bukannya malah lebih bagus kalau ada jaraknya? Kalau mau mepet tulis saja nilai negatif:
$('#Label1').stickyBar({
top: -10
});
kalo top -10
rusak layarnya
" Namun seperti yang Saya katakan di atas ^:D resiko ada pada posisi elemen ter-manipulasi dan elemen-elemen di sekelilingnya yang akan sulit dikendalikan karena perubahan posisi secara mendadak :W "
saya balikan lagi jadi top:0
hehe makasih mas
hohohoho di blog saya ada jg tuh sticky (bag. menu) <3
wew ada HIBERNASI :D
sampe mana yah bw-bwnya ini orang!!!
sampe2 ada di Tien Nguyen segala?
tools keren, tp susah di ambil euy...hihihihi :D
ada postingan baru tuh bos!!!
monggo di sambi :D
Lama tidak mampir ada lagi yang baru rupa-nya. Sayang sekali modemku ngadat bang dan lelet jadi tidak bisa coba..
permisi numpang mampir.. :D skadar mo ngucapin Met Raya Idul Fitri, taqabalallaahu minna wa minkum, mohon maaf lahir batin to Mas Taufik dan temen2 di sini.
*makasih Mas Taufik udah banyak bagiin ilmu yang langsung ane terapin di blog \o/
Met hari raya Idul Fitri juga. Mohon maaf lahir batin. Sekalian untuk komentar-komentar sejenis di bawah. Hehe :p
Bang, tolong dong cek in http:// blog-himajie.blogspot. com/ , kok work, tpi hasilnya ga ngikutin window ya :(
oh iyaa bang.. sy aktifinnya di halaman posting...
Set opsi animated menjadi false. Kalau perlu sesuaikan juga nilai pada opsi top. Nilainya bisa positif ataupun negatif:
$('#sidebar').stickyBar({
animated:false,
top:-40
});
gini bang, coba cek per postingnya, pasti posisi widget pada saat scroll berbeda-beda, dan juga cross-browsernya.. sy coba pakai chrome, posisinya jauh berbeda mas.. maaf klo ngerepotin :(
Memang susah kalau hubungannya sudah langsung dengan template/posisi elemen lain. Coba kamu bungkus dulu sidebarmu dengan elemen baru lalu set pembungkus itu sebagai elemen sticky:
$('#sidebar-wrapper-2').wrap('<div class="sticky-el"></div>');
$('.sticky-el').stickyBar();
wahh tengkiuu bgt banngg,, :-bd mantaaappp... makasih bantuannya. sukses slalu buat blog ini :D
mas, kalo misalnya kita mau memberhentikan StickyBarnya di sebuah tempat berbeda, misal kalo udah sampe di HTML2 Stickybarnya berhenti mengikuti, itu bisa ga ? :D
Tinggal set nilai opsi until dengan ID widget tersebut:
$('.box').stickyBar({
until: "#HTML2"
});
kalo script itu di gabungin sama script yang d atas bisa kan mas ?
kalo saya mau coba sticy barnya saya kasih di salah satu widget apakah optionya gini mas ?
$(function() {
$('#HTML1').stickyBar();
});
HTML1 misal salah satu widget
Yep.
Oke mas, saya coba deh :)
kalo yang di sticky itu judul postingan gimana?
$('.post-title').stickyBar();
makasih bisa nih
#CommentBack
saya coba berhasil.. \o/
tapi pas saya ganti dengan top menu jadi gini ya mas??
Hasil:
http://1.bp.blogspot.com/-g0skXZfwOm0/USBHLyZFcHI/AAAAAAAAAfA/8HzLMCO1I2o/s320/p1.jpg
malah tidak tratur..!! --> http://jsfiddle.net/azewbz/5zy4L/
ga jadi mas`udah bisa..!!
tapi pemasangan di blognya kaya gmna? apalagi liat plugin ini : http://hompimpa.googlecode.com/svn/trunk/StickyBar/js/jquery.stickybar.js
itu emang sgtu pluginya yg harus di simpen di blog?
Pakai yang sudah dikompres ⇒ http://hompimpa.googlecode.com/svn/trunk/StickyBar/js/jquery.stickybar.min.js
sukses`
trus mas biar posisinya di kiri/kanan gimana ya?
soalnya template saya full ga ada sidebar jdi malah tampil di tengah..!!
cek : azewcreator.blogspot.com
Pakai markup HTML tambahan untuk memposisikan menu ke kiri/kanan:
<div class="menu-holder">
<div class="menu"> ... </div>
</div>
.menu-holder {
position:absolute;
top:200px;
right:0; /* menempel ke kanan */
}
$('.menu').stickyBar();
Kalau kamu pasti ngerti maksudnya ⇒ http://jsfiddle.net/st7Pj/16/
\o/ hasil yg baik..!!
mksih mas`udah bantu.
mas, ko kalo cssnya ada margin(margin:0 -10px) ko malah elemennya geser ke kiri kalo discroll
gimana biar gak geser?
margin:0 -10px artinya seperti ini:
margin-top:0;
margin-right:-10px; /* negatif ke kanan */
margin-bottom:0;
margin-left:-10px; /* negatif ke kiri */
Makannya jadi bergeser ke kiri. Mengenai nilai negatif ke kanan tidak terpengaruh karena plugin ini secara otomatis menentukan lebar elemen. Jadi hanya akan bergeser ke kiri saja.
Terkait: CSS Margin dan Padding
lha terus gimana biar elemen yang diberi sticky gak geser?
cek lastmylife.blogspot.com
iya. sticky widget di blog saya juga gak bergerak
mas bro kalo tanpa batas akhir gmn ya, jadi mengikuti terus sampe bawah mentok
cth : http://backlinkgratisberkualitasindonesia.blogspot.com/
biar dia ngikut terus tanpa henti bagaimana solusinya?
makasih banyak <3
Plugin ini secara normal tidak akan pernah menghentikan elemen sticky, selama opsi until tidak ditentukan.
jadi opsi untilnya di kosongkan saja begitu?
thx before.
lam kenal sebelum nya mas, plugin dah saya pasang tapi kokwaktu scrol ke bawah tapilannya jadi di belakang layar , mohon pencerahan nya monggo di cek gond3s.com
Coba tambahkan kode z-index:99 pada bagian #menu{bla bla
sukses gan, sebelumnya makasih banyak wat pencerahannya, N lam kenal aja
sama sama mas salam kenal juga
apa yg salah ya di script saya ini?
$('nav').stickyBar();
$('#BlogArchive1').stickyBar({fixedClass: 'arsip-melayang', top: 20px, until: 'custom-comment-editor-wrapper'});
mau nambahin efek sticky di NAV sama widget Arsip malah tidak bekerja scriptnya,, :( =p*
$(document).ready(function() {
$('nav').stickyBar();
$('#BlogArchive1').stickyBar({
fixedClass: "arsip-melayang",
top: 20, // tanpa satuan
until: "#custom-comment-editor-wrapper" // kurang simbol `#`
});
});
This comment has been removed by the author.
bisakah sticky bekerja setelah kita mengklick elemen tertentu?
Apakah ini bisa digunakan sebaliknya mas.. ? misalnya ketika discrooll ke atas elemen yang dibawah tetep di dibawah kurang lebih seperti tombol back to top di DTE
Plugin ini tidak mendukung logika yang terbalik. Harus membuat kalkulasi sendiri kalau ingin membuat efek sticky seperti di blog ini. Kalau mau bisa mencari plugin sejenis ini di luar yang cukup berat, tapi bisa digunakan untuk menangani banyak kasus (tergantung konfigurasi dari pengguna). Kata kunci:
[1]. “javascript/jquery sticky plugin”
[2]. “jquery waypoint”
yup terima kasih mas.. akan saya coba... dan pelajari.
Kalau mau dibikin on / off dengan klik tombol gmn kodenya mas ??
mas mohon bantuannya dong, klo cuma ambil plugin untuk untilnya saja bisa gak?soalnya klo yang lain tidak digunakan sayang. :D
⇒ /2012/05/sticky-nav.html
Ni koment perdana saya, taunya jga dari blong kang ismet, disana juga baru perdana commnet :D
Mas, buat sticky limit itu gmn ya?
klo dikombinasikan dengan sticky easing codenya seperti apa?
Thanks
Pagi kak, bagaimana caranya mematikan fungsi ini kak, aku coba begini :
$('#close').on("click", function {
$('#sidebar').stickyBar({});
});
Masih tidak bisa kak, Mohon bantuannya kak ?
Coba begini:
$('#close').on("click", function() {
$('#sidebar').removeAttr('style');
});
Belum berhasil juga kak,sidebar masih mengikuti scroll ?
oh iya, nambah satu lagi kak :
$(window).on("scroll", function() {
var position = $(this).scrollTop();
$('div').css('top', position);
});
Jika ingin nambahin effect SPEED dan EASING gimana kak ?
$(window).on("scroll", function() {
var position = $(this).scrollTop();
$('div').stop().animate({top:position}, 700, "easeOutBounce");
});
[img]http://4.bp.blogspot.com/-U9rmSKGv6VU/U4XYYH1CVsI/AAAAAAAAAEU/AtQcra6g3f4/s320/Masalah.png[/img]
Mass saya minta tolong, untuk mengatasi masalah di atas bagaimana?
Maaf saya masih newbie
untuk blog saya mas bisa buka di [url=http://tkj-only.blogspot.com/]sini[/url]
Salam kenal ea mas, maas saya masih newbie. :'(
Perbesar nilai z-index pada navigasi. Ditaruh di dalam kelas sticky juga boleh:
.isFixed {z-index:9999}
kok gk work ya mas taufik, emng scriptnya si pasang di mana yang opsi lanjutan ?? :(
Di tempat yang sama di dalam inisiasi plugin.
sudah di terapkan di atas kode < / head > namun tidak bekerja bung taufik, ada solusi ??? :D
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
Tambahkan satu }); lagi di baris paling bawah. Biasakan menulis kode pakai indentasi, supaya bisa tahu mana region kode yang belum tertutup dengan benar.
mas demonya ga jalan *404
Post a Comment
<< Home