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

    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...

    • Taufik Nurrohman

      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/

      • Unknown

        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/

  • debbie irlando manurung

    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

  • Surga Kenari

    kebetulan yg masih saya pake adalah yg fixed dari dynamic drive , sprtinya yg ini lebih sempurna :-bd

  • Surga Kenari

    padahal sudah top:0

    tapi kok masih blom mepet ke atas ya mas?

    http://jadikanpinter.blogspot.com

    lihat bagian sidebar - Pilih Kategori

    • Taufik Nurrohman

      Bukannya malah lebih bagus kalau ada jaraknya? Kalau mau mepet tulis saja nilai negatif:

      $('#Label1').stickyBar({
      top: -10
      });
      • Surga Kenari

        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

  • Beben Koben

    hohohoho di blog saya ada jg tuh sticky (bag. menu) <3
    wew ada HIBERNASI :D

    • Beben Koben

      sampe mana yah bw-bwnya ini orang!!!
      sampe2 ada di Tien Nguyen segala?
      tools keren, tp susah di ambil euy...hihihihi :D

      • Beben Koben

        ada postingan baru tuh bos!!!
        monggo di sambi :D

  • Unknown

    Lama tidak mampir ada lagi yang baru rupa-nya. Sayang sekali modemku ngadat bang dan lelet jadi tidak bisa coba..

  • MUX SPARROW

    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/

    • Taufik Nurrohman

      Met hari raya Idul Fitri juga. Mohon maaf lahir batin. Sekalian untuk komentar-komentar sejenis di bawah. Hehe :p

  • ImpotenSIA

    Bang, tolong dong cek in http:// blog-himajie.blogspot. com/ , kok work, tpi hasilnya ga ngikutin window ya :(

    • ImpotenSIA

      oh iyaa bang.. sy aktifinnya di halaman posting...

    • Taufik Nurrohman

      Set opsi animated menjadi false. Kalau perlu sesuaikan juga nilai pada opsi top. Nilainya bisa positif ataupun negatif:

      $('#sidebar').stickyBar({
      animated:false,
      top:-40
      });
      • Tinta maple

        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 :(

  • Taufik Nurrohman

    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();
  • ImpotenSIA

    wahh tengkiuu bgt banngg,, :-bd mantaaappp... makasih bantuannya. sukses slalu buat blog ini :D

  • Rosyd Aqbar

    mas, kalo misalnya kita mau memberhentikan StickyBarnya di sebuah tempat berbeda, misal kalo udah sampe di HTML2 Stickybarnya berhenti mengikuti, itu bisa ga ? :D

  • Taufik Nurrohman

    Tinggal set nilai opsi until dengan ID widget tersebut:

    $('.box').stickyBar({
    until: "#HTML2"
    });
  • Rosyd Aqbar

    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

  • Taufik Nurrohman

    Yep.

  • Rosyd Aqbar

    Oke mas, saya coba deh :)

  • Unknown

    kalo yang di sticky itu judul postingan gimana?

  • Taufik Nurrohman

    $('.post-title').stickyBar();
  • Unknown

    makasih bisa nih
    #CommentBack

  • azewBz

    saya coba berhasil.. \o/
    tapi pas saya ganti dengan top menu jadi gini ya mas??
    Hasil:

    malah tidak tratur..!! --> http://jsfiddle.net/azewbz/5zy4L/

  • azewBz

    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?

  • Taufik Nurrohman

  • azewBz

    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

  • Taufik Nurrohman

    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/

  • azewBz

    \o/ hasil yg baik..!!
    mksih mas`udah bantu.

  • Unknown

    mas, ko kalo cssnya ada margin(margin:0 -10px) ko malah elemennya geser ke kiri kalo discroll
    gimana biar gak geser?

  • Taufik Nurrohman

    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.

  • Unknown

    lha terus gimana biar elemen yang diberi sticky gak geser?
    cek lastmylife.blogspot.com

  • Unknown

    iya. sticky widget di blog saya juga gak bergerak

  • Surga Kenari

    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

  • Taufik Nurrohman

    Plugin ini secara normal tidak akan pernah menghentikan elemen sticky, selama opsi until tidak ditentukan.

  • Surga Kenari

    jadi opsi untilnya di kosongkan saja begitu?

    thx before.

  • Unknown

    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

  • Unknown

    Coba tambahkan kode z-index:99 pada bagian #menu{bla bla

  • Unknown

    sukses gan, sebelumnya makasih banyak wat pencerahannya, N lam kenal aja

  • Unknown

    sama sama mas salam kenal juga

  • V

    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*

  • Taufik Nurrohman

    $(document).ready(function() {
    $('nav').stickyBar();
    $('#BlogArchive1').stickyBar({
    fixedClass: "arsip-melayang",
    top: 20,  // tanpa satuan
    until: "#custom-comment-editor-wrapper" // kurang simbol `#`
    });
    });
  • Alpha Dian Tamalanrea

    Komentar ini telah dihapus oleh pengarang.

  • you

    bisakah sticky bekerja setelah kita mengklick elemen tertentu?

  • you

    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

  • Taufik Nurrohman

    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”

  • you

    yup terima kasih mas.. akan saya coba... dan pelajari.

  • Unknown

    Kalau mau dibikin on / off dengan klik tombol gmn kodenya mas ??

  • Ariana

    mas mohon bantuannya dong, klo cuma ambil plugin untuk untilnya saja bisa gak?soalnya klo yang lain tidak digunakan sayang. :D

  • Taufik Nurrohman

  • Muh Yusuf Natsir

    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

  • IRIL SAGITA

    Pagi kak, bagaimana caranya mematikan fungsi ini kak, aku coba begini :

    $('#close').on("click", function {
    $('#sidebar').stickyBar({});
    });

    Masih tidak bisa kak, Mohon bantuannya kak ?

  • Taufik Nurrohman

    Coba begini:

    $('#close').on("click", function() {
    $('#sidebar').removeAttr('style');
    });
  • IRIL SAGITA

    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 ?

  • Taufik Nurrohman

    $(window).on("scroll", function() {
    var position = $(this).scrollTop();
    $('div').stop().animate({top:position}, 700, "easeOutBounce");
    });

Komentar telah ditutup.