Cara Membuat Sticky Widget Pada Sidebar

Oleh Syafdillah

12 Februari 2016

Pada blogger tips yang lalu telah dibahas bagaimana cara membuat dan memasang sticky widget pada Menu Navbar. Kali ini akan dibahas cara membuat dan memasang sticky widget pada Sidebar. Dengan menggunakan fungsi JQuery untuk menetapkan sidebar mana yang akan dikenakan fungsi sticky

Cari kode </body> jika sudah ketemu, letakkan kode di bawah ini sebelum kode </body>

<script type='text/javascript'>
//<![CDATA[
// Sticky Widget
$(function() {
  var top = $('#sidecontent').offset().top - parseFloat($('#sidecontent').css('marginTop').replace(/auto/, 0));
  var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));

  var maxY = footTop - $('#sidecontent').outerHeight();

  $(window).scroll(function(evt) {
    var y = $(this).scrollTop();
    if (y > top) {
      if (y < maxY) {
        $('#sidecontent').addClass('fixed').removeAttr('style');
      } else {
        $('#sidecontent').removeClass('fixed').css({
          position: 'absolute',
          top: (maxY - top) + 'px'
        });
      }
    } else {
      $('#sidecontent').removeClass('fixed');
    }
  });
});
//]]>
</script>

tulisan yang berwarna merah merupakan ID yang akan dikenakan fungsi sticky, Anda bisa menggantinya sesuai dengan ID pada template masing-masing.

Kemudian cari kode ]]></b:skin> jika sudah ketemu, letakan kode di bawah ini sebelum kode ]]></b:skin>

#sidecontent {
  width: 255px;
  height: 200px;
  margin: auto;
  background: #fc4f3f;
  position: absolute;
}
#sidecontent.fixed {
  position: fixed;
  top: 20px;
}

tulisan yang berwarna merah merupakan ID yang akan dikenakan fungsi sticky, sedangkan tulisan yang berwarna kuning merupakan atribut untuk mengatur ID yang dikenakan fungsi sticky agar tidak ikut bergulir saat halaman digulirkan kebawah. 20px merupakan jarak antara navbar dengan sidebar, ini bisa disesuaikan pada template masing-masing.

Selesai, lalu simpan Edit HTML tadi dan lihat hasilnya.

Ayo Like Facebooknya

Tag : Blogging