Cara Menciptakan Sticky Widget Atau Widget Yang Tidak Bergerak Saat Halaman Di-Scroll Ke Bawah
- Cara Membuat Sticky Widget. Apakah anda salah satu blogger yang menginginkan widget-widget tertentu di blog anda tetap membisu meskipun blog di scroll ke bawah? Widget yang menyerupai itu disebut sticky widget.
Terkadang kita memang perlu menciptakan widget atau sajian tertentu supaya tetap terlihat meskipun sudah di scroll ke bawah, sendiri pun menggunakan sticky widget ini, anda dapat lihat widget sajian di blog ini dan juga widget advertisement yang akan tetap terlihat meskipun anda sudah men-scroll halaman ke bawah.
Yang aku tandai dengan tanda panah merah di atas yaitu rujukan sticky widget yang ada di ini. Lalu bagaimana cara menciptakan widget tidak bergerak meskipun halaman sudah di-scroll kebawah ? Berikut yaitu caranya:
Membuat Sticky Widget Alias Widget Yang Tetap Diam Ketika Discroll Ke Bawah.
1. Langsung aja ya tanpa basa-basi, copy aja nih script ini ke html tema blog anda dan letakkan atau paste dibawah isyarat </head>
<script type='text/javascript'>
//<![CDATA[
$(function() {
if ($('#HTML1').length) { // Ganti "#HTML1" dengan ID widget milikmu
var el = $('#HTML1');
var stickyTop = $('#HTML1').offset().top;
var stickyHeight = $('#HTML1').height();
$(window).scroll(function() {
var limit = $('#footer1').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer1"
var windowTop = $(window).scrollTop();
if (stickyTop < windowTop) {
el.css({
position: 'fixed',
top: 60 // Jarak atau margin sticky dari atas
});
} else {
el.css('position', 'static');
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({
top: diff
});
}
});
}
});
//]]>
</script>
//<![CDATA[
$(function() {
if ($('#HTML1').length) { // Ganti "#HTML1" dengan ID widget milikmu
var el = $('#HTML1');
var stickyTop = $('#HTML1').offset().top;
var stickyHeight = $('#HTML1').height();
$(window).scroll(function() {
var limit = $('#footer1').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer1"
var windowTop = $(window).scrollTop();
if (stickyTop < windowTop) {
el.css({
position: 'fixed',
top: 60 // Jarak atau margin sticky dari atas
});
} else {
el.css('position', 'static');
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({
top: diff
});
}
});
}
});
//]]>
</script>
Catatan:
Ganti yang aku tandai warna merah dengan ID widget milik anda yang ingin dibentuk tidak bergerak saat halaman discroll. Dan ganti yang aku tandai warna biru dengan ID widget pembatas kapan si Sticky Widget berhenti. Dalam perkara script di atas yang aku pakai, sticky widget akan berhenti saat sudah bertemu dengan footer1.
2. Kemudian copy isyarat CSS ini dan letakkan atau paste di atas kode ]]></b:skin>
.sticky {
position:fixed;
top:10px;
z-index: 100;
}
Sudah, gitu aja. Praktis bukan? Silahkan cobain di blog anda. Hehe. Semoga artikel ihwal bagaimana cara menciptakan sticky widget ini bermanfaat untuk anda yaa.
Sumber https://bilkonet.blogspot.com/
