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.
