Tutorial Membuat Widget Melayang Ketika di Scroll Kebawah – Sticky Widget Sidebar di Blogspot/Blogger

Kali ini saya akan memberikan tutorial mengenai Membuat Widget Melayang Ketika di Scroll Kebawah – Sticky Widget Sidebar di Blogspot/Blogger.

Sticky Widget ini bukan hanya bisa di gunakan pada widget yang ada pada sidebar saja namun semua widget yang ada pada blog kita termasuk Menu pada Header 🙂

Untuk lebih jelas nya silahkan kamu pelajari saja code nya dalam artikel ini.

untuk membuat Sticky widget ini kita hanya perlu membuat CSS & JavaScript saja, simple kok mudah untuk di pahami.

Cara Membuat Widget Melayang Ketika di Scroll Ke Bawah

Tahap pertama kita bikin CSS nya, Tambahkan Code CSS berikut di atas </style> atau ]]></b:skin>

.sticky {
  position:fixed;
  top:10px;/* jarak dari atas*/
  z-index: 100;
}

Tahap Kedua tambahkan Javascript, Tambahkan Code Javascript berikut di atas </body>

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

#HTML5 ini bisa kamu ganti dengan element apa saja bukan hanya widget pada sidebar saja 🙂 silahkan berkreasi sendiri dengan Sticky widget ini 🙂

Untuk kamu yang masih merasa bingung bisa tanya atau kita diskusikan di kolom komentar.