[UPDATE] Membuat Sticky Widget Berhenti diatas Footer

Pada kesempatan kali ini saya akan membahas cara membuat sticky widget di sidebar yang bila di scroll akan berhenti di atas footer. Bagi yang tidak tahu apa itu Sticky Widget, nama lain dari sticky widget ini adalah "widget yang mengikuti layar ketika di scroll" hehehe...

Bila sebelumnya anda pernah menemukan artikel serupa seperti ini di Blog KompiAjaib milik mas AdhySuryadi, maka anda benar.

Tapi kali ini saya memberikan updatenya, dikarenakan widget lamanya (yang milik mas Adhy) memiliki sedikit bug, yaitu widget yang tetap sticky meskipun diakses melalui mobile, yang dapat mengakibatkan kita tidak dapat menscroll sampai ke footer (tertahan oleh widget sticky).

Untuk lebih jelasnya silahkan lihat gambar dibawah ini:


Sebenarnya hal yang perlu anda lakukan hanyalah mematikannya pada media screen tertentu. Tetapi hanya ada sedikit orang yang mengetahui caranya.

Nah disini akan saya jabarkan caranya, baik dari cara pemasangan widget sticky ini sampai cara memperbaikinya.

Langkah Pertama: Persiapan

Silahkan anda cari widget mana yang ingin anda buat sticky, beserta ID widgetnya. Bagi anda yang belum tahu cara melihat ID widget, silahkan anda cari di internet ya, soalnya saya belum pernah memposting caranya... hehehe.

Saya sarankan untuk menempatkan widget yang ingin dibuat sticky paling bawah di sidebar dari widget lainnya, agar tidak terjadi penumpukan.

Disini akan saya beri contoh ID dari widgetnya adalah #JARWO.

Langkah Kedua: Pemasangan serta Perbaikan Bug

Silahkan anda taruh kode Javascript dibawah ini tepat diatas tag </body>

<script type='text/javascript'>//<![CDATA[
// Sticky Widget
  $(window).width(function() { if ($(this).width() > 940) {
$(function(){
   if ($('#JARWO').length) {
      var el = $('#JARWO');
      var stickyTop = $('#JARWO').offset().top;
      var stickyHeight = $('#JARWO'').height();

      $(window).scroll(function(){
          var limit = $('#footer').offset().top - stickyHeight - 20;

          var windowTop = $(window).scrollTop();

          if (stickyTop < windowTop){
             el.css({ position: 'fixed', top: 0 });
             el.addClass("sticky-jarwo");
          }
          else {
             el.css('position','static');
          }

          if (limit < windowTop) {
          var diff = limit - windowTop;
          el.css({top: diff});
          }
        });
   }
});
   }});
//]]></script>
<style>@media screen and (min-width:940px){#JARWO{position:static !important}}</style>

Silahkan anda ganti kode yang berwarna:

• Kuning dengan ID widget sticky anda
• Aqua dengan ID tempat dimana anda ingin membuat sticky widget berhenti, disini saya berikan diatas footer (ID = #footer)
• (OPSIONAL) Magenta dengan ID class untuk widget anda nantinya. Saya sarankan untuk jangan diubah.

Bila anda simak baik-baik kode diatas, ada kode yang saya beri warna hijau. Kode itulah yang saya maksud untuk memperbaiki bug tadi.

Silahkan anda ganti angka 940 dengan lebar layar yang sesuai dengan blog anda ketika sidebar menurun kebawah (tidak disamping lagi, di blog saya sidebar tidak disamping kanan lagi ketika width 940px, oleh karenanya saya beri angka 940. Untuk lebih lengkapnya silahkan anda baca di artikel ini).

Langkah Terakhir: Pengetesan

Sekarang waktunya pengetesan. Silahkan anda simpan template anda lalu buka blog. Saya yakin, bila anda mengikuti cara diatas dengan benar pasti widget ini bekerja seperti biasa tanpa masalah.

Sekian artikel yang saya buat, semoga bermanfaat dan terima kasih banyak kepada Blog KompiAjaib atas JavaScript dan tips bermanfaatnya!

Update tanggal 24 Juni 2017 (1 hari sebelum lebaran hehehe)

Kalau widget Sticky Widget Sidebar ini tidak work pada blog anda, silahkan tempatkan kode Javascript dibawah ini diatas kode </head>

<script type='text/javascript'>
       //<![CDATA[
       if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></scr" + "ipt>");}
       //]]>
</script>

Kode diatas berguna untuk menambah Jquery di blog anda yang sudah di defer...

Terakhir di update : Selasa, 14 November 2017, 16.30. Penambahan style static untuk media query dengan CSS.