Sticky Widget, Fix on Top While Scrolling

Jocker ID - Sedikit kebingungan juga memberi judul pada artikel ini, tapi bila menggunakan bahasa Inggris sepertinya judul ini tampak keren daripada yang lainnya. Artikel yang sengaja saya buat khusus untuk Mas Indra DP dan umumnya buat kita semua sebagai bahan pembelajaran.

Untuk DEMO sticky widget bisa lihat widget "Artikel Populer" yang saya pakai di sisi kanan blog, silakan skroll ke bawah dan widget akan tetap muncul atau fix di sisi kanan meskipun blog di skroll ke paling bawah.

Saya dapatkan kode ini bersumber dari blognya Kang Ismet (blog.kangismet.net). Langsung saja, berikut tutorialnya.

Masukan kode di bawah ini di atas kode ]]></b:skin> atau </style>

 .bs_sticking {background: none !important;position: fixed;top: 6px;}

Selanjutnya, simpan kode yang di bawah ini di atas kode </body> (kode aslinya sebenarnya tak begini, tapi saya kompresi hingga menjadi lebih ringan)

<script>/*<![CDATA[*/bs_makeSticky("HTML1");function bs_makeSticky(f){var b=document.getElementById(f);var c=document.createElement("div");b.parentNode.insertBefore(c,b);var d=b.offsetWidth;var e=b.className+" bs_sticky";window.addEventListener("scroll",a,false);function a(){var g=c.getBoundingClientRect();if(g.top<0){b.className=e+" bs_sticking";b.style.width=d+"px"}else{b.className=e}}};/*]]>*/</script>

Pada script di atas ganti kode HTML1 yang bertulis tebal dengan id widget anda yang ingin dibuat sticky, misal id widgetnya PopularPost1 maka penulisannya seperti kode di bawah.

<script>/*<![CDATA[*/bs_makeSticky("PopularPost1");function bs_makeSticky(f){var b=document.getElementById(f);var c=document.createElement("div");b.parentNode.insertBefore(c,b);var d=b.offsetWidth;var e=b.className+" bs_sticky";window.addEventListener("scroll",a,false);function a(){var g=c.getBoundingClientRect();if(g.top<0){b.className=e+" bs_sticking";b.style.width=d+"px"}else{b.className=e}}};/*]]>*/</script>

Silakan cari id widgetnya di template sobat dengan menggunakan CTRL + F . Lihat screenshot di bawah.

Image: Capture from Template

Simpan template dan lihat hasilnya, semoga ini bekerja di template blog sahabat.

Referensi: Blog Kang Ismet