Ditulis oleh: Ditulis pada: 9/02/2016
Tujuan membuat sticky widget yaitu agar widget tersebut selalu tampil ketika halaman digulung ke bawah. Namun jika blog Anda menggunakan footer, maka pemilihan sticky widget ini jangan sampai melebihi footer agar tidak menjadi tumpang tindih antara widget dan footer.Nah jika Anda memang tengah mencari cara membuat sticky widget yang berhenti di atas footer, Anda bisa mencoba jquery di bawah ini, namun pastikan dulu Anda sudah memasang jquery library di blog Anda berapa pun versinya.
Silahkan simpan jqury di bawah ini di atas kode
</body>
<script>
//<![CDATA[
$(function(){ // document ready
if ($('#sticky').length) { // make sure "#sticky" element exists
var el = $('#sticky');
var stickyTop = $('#sticky').offset().top; // returns number
var stickyHeight = $('#sticky').height();
$(window).scroll(function(){ // scroll event
var limit = $('#footer').offset().top - stickyHeight - 20;
var windowTop = $(window).scrollTop(); // returns number
if (stickyTop < windowTop){
el.css({ position: 'fixed', top: 0 });
}
else {
el.css('position','static');
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({top: diff});
}
});
}
});
//]]>
</script>
#sticky adalah ID widget yang dibuat sticky, dan #footer adalah ID footer sebagai stoper sticky widget.Untuk mengatur jarak widget sticky dengan batas atas blog, atur angka pada
top pada kode el.css({ position: 'fixed', top: 0 });Namun jika kita ingin memberikan perlakuan khusus ketika widget menjadi sticky, misalnya mengganti background widget atau lainnya, kita bisa menambahkan class pada widget dan mengaturnya dengan css sehingga menjadi seperti di bawah ini. Ketika widget menjadi sticky maka akan ditambahkan class dan ketika mencapai batas footer maka class tersebut dihilangkan.
<script>
//<![CDATA[
$(function(){ // document ready
if ($('#sticky').length) { // make sure "#sticky" element exists
var el = $('#sticky');
var stickyTop = $('#sticky').offset().top; // returns number
var stickyHeight = $('#sticky').height();
$(window).scroll(function(){ // scroll event
var limit = $('#footer').offset().top - stickyHeight - 20;
var windowTop = $(window).scrollTop(); // returns number
if (stickyTop < windowTop){
el.css({ position: 'fixed', top: 0 });
el.addClass("intro");
}
else {
el.css('position','static');
el.removeClass("intro");
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({top: diff});
el.removeClass("intro");
}
});
}
});
//]]>
</script>
Kemudian CSS-nya seperti di bawah ini
.intro {
..................
..................
..................
}
Bagaimana, mudah bukan? Selamat mencoba....
Sumber: http://stackoverflow.com/questions/10669175/stop-floating-sticky-sidebar-div-at-footer-almost-working