Cara Membuat Sticky Widget di Sidebar Blog

deniverdana.com - Halo sobat, kali ini saya mau berbagi tutorial cara membuat sticky widget di sidebar blog.

Fungsinya yaitu untuk membuat widget tertentu menjadi sticky atau melayang mengikuti halaman saat di scroll ke bawah atau ke atas.

Cara Membuat Sticky Widget di Sidebar Blog
1. Ikuti caranya seperti screenshot gambar di bawah.


2. Klik Edit HTML
3. Tambahkan kode di bawah ini dan letakan di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#sticky-sidebar').length) { // Ganti "#sticky-sidebar" dengan ID tertentu
    var el = $('#sticky-sidebar');
    var stickyTop = $('#sticky-sidebar').offset().top;
    var stickyHeight = $('#sticky-sidebar').height();
    $(window).scroll(function() {
      var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper"
      var windowTop = $(window).scrollTop();
      if (stickyTop < windowTop) {
        el.css({
          position: 'fixed',
          top: 20 // Jarak atau margin sticky dari atas
        });
      } else {
        el.css('position', 'static');
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({
          top: diff
        });
      }
    });
  }
});
//]]>
</script>
Perhatikan kode yang ditandai, ganti kode tersebut dengan ID yang akan dibuat sticky sesuai template yang digunakan.
Catatan:
#sticky-sidebar : ID dari konten atau widget yang akan dibuat sticky
#footer-wrapper : Tentukan ID untuk membatasi fungsi sticky
3. Tambahkan kode CSS di bawah ini dan letakan di atas kode ]]></b:skin>
#sticky-sidebar{width:100%;max-width:300px}
Silahkan ganti 300px sesuai dengan lebar sidebar pada template yang sobat gunakan.
4. Simpan template

Jika ada pertanyaan silahkan berkomentar.