Cara Membuat Widget Sidebar Sticky Mengikuti Scroll

Wednesday, March 02, 2016 by Adi 2 Comments A⁺ a^-

Pernahkah kamu melihat widget blog yang mengikutimu ketika discroll kebawah atau keatas? Dengan kamu mengunjungi posting ini pastinya kamu sudah pernah melihatnya, dan kamu juga pasti ingin membuat atau memasangnya diblog/webmu bukan? kalo iya gue ucapakan selamat karena kamu telah menemukan cara yang pasti bekerja diblog/web milikmu. Tapi kalo belum pernah gue mau jelaskan sedikit tentang sticky. Sticky dalam bahasa indonesia artinya menempel atau lenget, sedangkan dalam dunia internet/website sticky memiliki arti tetap ditempat walau discroll keatas atau kebawah ia akan selalu mengikuti layar. Bisa disimpulkan kalo widget sticky berarti widget yang akan selalu berada dilayar walau discoll kebawah atau keatas.

Gue telah mempelajari beberapa script widget sticky yang gue temukan. Semua script untuk membuat widget sticky kebanyakan mengunakan javascript jquery yang mudah dipelajari, dimengerti, dan digunakan. Beberapa script tersebut juga memiliki perbedaan pada tampilan akhirnya. Seperti ada yang mengikuti terus sampai bawah, ada yang berhenti sampai footer, dan ada yang setelah discroll baru mengikuti. Semua itu akan gue jelaskan secara rincih, tinggal kamu coba satu persatu dan pilihlah mana yang paling cocok dengan tampilan blog/web milikmu.

Cara Membuat Widget Sticky

Kode Sticky 1

Kode yang ini telah gue pake disalah satu widget halaman ini dan sudah jelas terbukti berjalan. Coba saja scoll halaman ini, maka widget SUBSCRIBE BY EMAIL akan mengikuti ketika discroll baik kebawah atau keatas. Kode ini hanya bekerja kalo diletakan didalam templates. Lebih bagus lagi kalo diletakan diatas </body>.

<script type='text/javascript'>
//<![CDATA[
(function(e,p){e.extend({lockfixed:function(a,b){b&&b.offset?(b.offset.bottom=parseInt(b.offset.bottom,10),b.offset.top=parseInt(b.offset.top,10)):b.offset={bottom:100,top:0};if((a=e(a))&&a.offset()){var n=a.css("position"),c=parseInt(a.css("marginTop"),10),l=a.css("top"),g=a.offset().top,h=!1;if(!0===b.forcemargin||navigator.userAgent.match(/\bMSIE (4|5|6)\./)||navigator.userAgent.match(/\bOS ([0-9])_/)||navigator.userAgent.match(/\bAndroid ([0-9])\./i))h=!0;e(window).bind("scroll resize orientationchange load lockfixed:pageupdate",
a,function(k){if(!h||!document.activeElement||"INPUT"!==document.activeElement.nodeName){var d=0,d=a.outerHeight();k=a.outerWidth();var m=e(document).height()-b.offset.bottom,f=e(window).scrollTop();"fixed"!=a.css("position")&&(g=a.offset().top,c=parseInt(a.css("marginTop"),10),l=a.css("top"));f>=g-(c?c:0)-b.offset.top?(d=m<f+d+c+b.offset.top?f+d+c+b.offset.top-m:0,h?a.css({marginTop:parseInt((c?c:0)+(f-g-d)+2*b.offset.top,10)+"px"}):a.css({position:"fixed",top:b.offset.top-d+"px",width:k+"px"})):
a.css({position:n,top:l,width:k+"px",marginTop:(c?c:0)+"px"})}})}}})})(jQuery);
//]]>
</script>
<script type='text/javascript'>
if (screen.width &gt;= 768) {
(function($) {
$.lockfixed(&quot;#FollowByEmail1&quot;,{offset: {top: 42, bottom: 160}});
})(jQuery);
}
</script>

Silakan ganti #FollowByEmail1 dengan id widget kamu. Dan untuk top: 42 juga diganti sesuai jarak widget dengan bagian atas layar, sedangkan bottom: 160 kamu ganti sesuai jarak dari bawah halaman ke widget atau dimana widget akan berhenti mengikuti scroll. Kelemahan kode ini adalah widget akan melebar ketika discroll oleh sebab itu kamu butuh kode css yang harus diletakan pada diatas ]]></b:skin>

<style>
#FollowByEmail1 {display: block;max-width: 298px;}
</style>

Ubah nilai max-width atau batas lebar maksimal sesuai lebar asli widget.

Kode Sticky 2

Menurut gue kode sticky ini adalah yang paling menarik, karena menggunakan effect animasi yang sangat cocok dipadukan dengan template responsive. Jadi setelah scoll keatas atau kebawah sticky ini akan bergerak untuk menyesuaikan tampilan dengan sendirinya. Silakan lihat saja LIVE DEMOnya.

LIVE DEMO
Masuk ke TEMPLATE dan pilih EDIT HTML. Letakan kode dibawah ini diatas </body>.

<script type="text/javascript">
//<![CDATA[
$(function () {
  var offset = $("#HTML1").offset();
  var topPadding = 0;
   $(window).scroll(function () {
     if ($(window).scrollTop() > offset.top) {
       $("#HTML1").stop().animate({
         marginTop: $(window).scrollTop() - offset.top + topPadding + 0 // Setelah discroll
         })
      } else {
       $("#HTML1").stop().animate({
         marginTop: 0 // Sebelum discroll
         })
       }
    })
});
//]]>
</script>

Ganti #HTML1 dengan id witget kamu. Untuk PENYESUAIAN, Pada ada angka 0 diganti dengan jarak antara widget dengan bagian atas layar browser baik yang sebelum scroll atau yang sesudah scroll.

Kode Sticky 3

Hampir sama dengan kode sticky yang pertama namun disini lebih fokus dimana widget akan berhenti jika sudah betemu ID widget tertentu. Lihat kode dibawah ini, gue memberi batas dimana widget akan berhenti jika sudah sampai #footer1.

Masuk ke TEMPLATE dan pilih EDIT HTML. Letakan kode dibawah ini diatas </body>.

<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#HTML4').length) { // Ganti "#HTML4" dengan ID widget milikmu
    var el = $('#HTML4');
    var stickyTop = $('#HTML4').offset().top;
    var stickyHeight = $('#HTML4').height();
    $(window).scroll(function() {
      var limit = $('#footer1').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer1"
      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>

Yang boleh diganti hanyalah kode yang sudah gue tandai berwarna merah. Seperti #HTML4 diganti dengan ID widget milikmu dan #footer1 diganti dengan ID dimana widget akan berhenti.

Kode Sticky 4

Sama seperti kode sticky yang pertama tapi yang ini lebih mirip seperti widget melayang karena tidak ada batasan atau pemberhentian widget setelah discroll.

Masuk ke TEMPLATE dan pilih EDIT HTML. Letakan kedua kode dibawah ini diatas </body>.

<script type="text/javascript">
$(document).ready(function() {
var stickyWidgetTop = $('#FollowByEmail1').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();  
if (scrollTop > stickyWidgetTop) {
    $('#FollowByEmail1').addClass('sticky');
} else {
    $('#FollowByEmail1').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
    stickyWidget();
});
});
</script>

<style type="text/css">
.sticky {
  position:fixed;
  top: 30px;
  z-index: 100;
  max-width: 298px;
  right: 100px;
}
</style>

Ganti #FollowByEmail1 dengan ID widget milikmu. Ganti juga nilai top sesuai jarak atas widget, nilai right sesuai dengan jarak kanan widget, dan max-width sesuai batas lebar masimal widget.

Semoga saja berkerja semua scriptnya. Kalo masih belum berkerja coba periksa jquery.min.js pada template, apakah sudah ada atau belum. Jika belum ada bisa kamu tambahkan salah satu kode jquery dibawah ini ke template dan letakan diatas </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>

Selamat mencoba dan semoga berhasil.

Tolong beritahu gue kalo salah kode ini work/bekerja diblog/web kamu. Jika kamu memiliki pertanyaan mengenai hal ini, jangan ragu untuk menanyakannya dikomentar. Dan kalo kamu merasa ini bermanfaat, silakan SHARE artikel ini disalah satu jejaring sosial milikmu dibawah ini.