Membuat Efek Sticky dibagian Sidebar

Membuat Efek Sticky dibagian Sidebar

Dalam bahasa istilah website Sticky berarti berada di depan atau selalu mengikuti walaupun mouse terus di scroll. Sedangkan Sticky Sidebar berarti membuat widget yang selalu menempel walaupun mouse kita scroll.

Temukan </body> yang paling bawah di bagian edit HTML. Setelah itu letakkan kode Script ini pas diatas kode </body>

<script>
//<![CDATA[
bs_makeSticky("PopularPosts1");
function bs_makeSticky(elem) 
{var bs_sticky = document.getElementById(elem);
var scrollee=document.createElement("div");
bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
var width = bs_sticky.offsetWidth;
var iniClass = bs_sticky.className + ' bs_sticky';
window.addEventListener('scroll', bs_sticking, false);
     function bs_sticking() 
{ var rect = scrollee.getBoundingClientRect();if (rect.top < 0) 
{bs_sticky.className = iniClass + ' bs_sticking';
bs_sticky.style.width = width + "px";} 
else {bs_sticky.className= iniClass;}}} //]]> 
</script>
<style>
.bs_sticking {background:#ffffff !important; position:fixed; top:6px;}
</style>

Saya menggunakan kode [PopularPosts1] sebagai contoh. biasanya kode Sidebar akan tampak kode seperti ini.

<b:section class='sidebar' id='sidebar' showaddelement='yes'>
<b:widget id='PopularPosts1' locked='false'
title='Populer Post' type='PopularPosts'>

Silahkan gunakan id apa yang mau ditambah Sticky.

Sesuaikan pertanyaan anda dengan artikel yang saya publish diatas ini. Saya hanya menjawab pertanyaan yang sesuai Tema.