Wednesday, September 12, 2012

JQuery Membuat Sidebar Melayang / Auto scroll

Membuat Sidebar Melayang / Auto scroll ini maksudnya yaitu membuat sidebar menjadi tampak selamanya meskipun halaman discroll ke bawah atau keatas, sidebar akan selalu terlihat karena tidak ikut terscroll.
Adapun caranya, kawan tinggal meletakan kode dibawah ini tepat diatas kode </head>. namun ingat kode ini adalah kode JQuery sehingga template sobat harus sudah memasang library JQuery.

Berikut kodenya:
<script type='text/javascript'> $(function(){var offset=$(&quot;#rsidebar-wrapper&quot;).offset();var topPadding=144;$(window).scroll(function(){if($(window).scrollTop()&gt;offset.top){$(&quot;#rsidebar-wrapper&quot;).stop().animate({marginTop:$(window).scrollTop()-offset.top+topPadding})}else{$(&quot;#rsidebar-wrapper&quot;).stop().animate({marginTop:0})}})}); </script> 
Perhatikan kode yang berwarna merah itu ID sidebarnya.. anda bisa ganti dengan ID sidebar anda karena ID sidebar setiap template berbeda-beda.

Demikian Membuat Sidebar Melayang / Auto scroll ini semoga berhasil.


Rating: 5 Reviewer: Unknown

5 comments:

  1. wah..bermanfaat sekali sist, mkasih buat tutorialnya. :)

    ReplyDelete
  2. Thx.. tapi yg ini dan yang kedua sama2 ga berfungsi. salahnya d mana ya?

    ReplyDelete
  3. akhirnya yang dicari-cari ada disini.... nakasih banget nih...
    kalau berkenan, mari kita tukeran link....
    bung-frangki.blogspot.com

    ReplyDelete