Sticky Widget | Pada kesempatan kali ini sya akan membagikan tutorial yang sangat singkat ini.
Sticky dalam Bahasa Indonesia artinya menempel. Sticky Widget Sidebar berarti membuat widget yang selalu menempel walaupun mouse kita scroll. Untuk demonya sendiri bisa dilihat di samping blog kang vanno.
Untuk membuat Sticky widget ini, ada tiga langkah mudah, silahkan simak satu persatu.
1. Menambakan kode CSS
2. Menambah kode JavaScript
Berikut Tutorialnya
Langkah 1 : Tambahkan CSS di atas kode
</style> /
]]></b:skin>
.sticky {
position: fixed;
top: 10px; /* jarak dari atas*/
z-index: 100;
}
Langkah 2 : Simpan Javascript di atas
</body>
<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML7').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyWidgetTop) {
$('#HTML7').addClass('sticky');
} else {
$('#HTML7').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
stickyWidget();
});
});
</script>
Ganti
#HTML7 dengan ID widget yang akan dibuat sticky.
Selamat berkreasi dengan Sticky widget.....
http://blog.kangismet.net/2012/10/membuat-sticky-widget-sidebar-di.html