Cara memodifikasi sidebar menjadi sticky

 Pernahkah sobat webdesign melihat tampilan web atau blog yang bagian,seperti popular post,atau biasa di sebut dengan sidebar,tetap di posisinya walau pun halaman website atau blog kita geser ke atas maupun ke bawah,popular post tetap sticky,atau tidak ikut tergeser.mungkin bagi sobat yang membutuhkan artikel,tentang cara membuat sidebar menjadi sicky,berikut admin akan bagikan cara membuatnya,seperti biasa buka dulu kode Html sobat,setelah itu copy kode javascript di bawah tepat di atas </body>

<script type='text/javascript'>//<![CDATA[ $(function() { if ($('#PopularPosts').length) { var el = $('#PopularPosts'); var stickyTop = $('#PopularPosts').offset().top; var stickyHeight = $('#PopularPosts').height(); $(window).scroll(function() { var limit = $('#footer').offset().top - stickyHeight - 20;//jarak berhentinya sticky di footer var windowTop = $(window).scrollTop(); if (stickyTop < windowTop) { el.css({ position: 'fixed', top: 20 }); } else { el.css('position', 'static'); } if (limit < windowTop) { var diff = limit - windowTop; el.css({ top: diff }); } }); } }); //]]></script>
tapi sebelumnya ganti dulu semua kode yang depanya menggunakan tanda pagar seperti ini #,sesuai dengan ID dari template sobat,sebagai contoh jika sobat ingin bagian popular post menjadi sticky,maka kita menggunakan ID template kita pada bagian popular post,terus bagaimana mengetahui ID dari template yang akan kita gunakan untuk sticky,sobat bisa lihat gambar di bawah

 Langkahnya sebagai berikut buka blog atau website sobat setelah itu,klik kanan pada mouse,pada area sidebar yang ingin di jadikan sticky,setelah itu cari Inspeksi Element,dan klik.maka akan tampil kode-kode seperti tampak pada gambar di atas.setelah kita mengetahui ID dari sidebar kita selanjutnya kita rubah kode Javascript diatas pada bagian yang di depanya ada tanda pagarnya atau #.

 Untuk fungsi dari var limit = $('#footer').offset().top - stickyHeight - 20;//jarak berhentinya sticky di footer
var windowTop = $(window).scrollTop();
 if (stickyTop < windowTop) {
 el.css({
 position: 'fixed',
 top: 20
adalah sticky akan berhenti sampai di bagian footer.dan sobat cari lagi ID untuk bagian footer,bagian footer yang mana?yaitu bagian yang biasanya web atau blog memasang tulisan Copyright @ 2016-2017 paling bawah dari halaman blog.untuk caranya sama seperti yang saya sebutkan di atas.setelah kita dapatkan ID,lalu simpan template dan selesai.silahkan di preview hasilnya,selamat mencoba.