Cara Membuat Sidebar Melayang

Cara membuat Sidebar melayang yaitu dengan sticky dan catcher, yaitu fungsinya agar ketika pengunjung mengkursorkan ke bawah maka otomatis sidebar yang terlewati menjadi mengikuti ke bawah dan tidak hilng, oke simak tutorialnya berikut ini :

Tambahkan kode css =

#catcher{
height:Auto;
}
#sticky{
width:300px;
height:auto;
}

Kemudian tambahkan kode scripnya di atas </body>

<!--Catcher dan Sticky by Pro Duck Start-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
        function isScrolledTo(elem) {
            var docViewTop = $(window).scrollTop(); //num of pixels hidden above current screen
            var docViewBottom = docViewTop + $(window).height();
            var elemTop = $(elem).offset().top; //num of pixels above the elem
            var elemBottom = elemTop + $(elem).height();
            return ((elemTop &lt;= docViewTop));
        }
        var catcher = $(&#39;#catcher&#39;);
        var sticky = $(&#39;#sticky&#39;);
        $(window).scroll(function() {
            if(isScrolledTo(sticky)) {
                sticky.css(&#39;position&#39;,&#39;fixed&#39;);
                sticky.css(&#39;top&#39;,&#39;0px&#39;);
            }
            var stopHeight = catcher.offset().top + catcher.height();
            if ( stopHeight &gt; sticky.offset().top) {
                sticky.css(&#39;position&#39;,&#39;absolute&#39;);
                sticky.css(&#39;top&#39;,stopHeight);
            }
        });
    });
</script>
<!--Catcher dan Sticky by Pro Duck End-->

dan terakhir tambahkan ke widget anda

<div id='catcher'>
widget yang telah ada
</div> <div id='sticky'>
isi sticky widget, baik FB Like Box, Banner, atau apa pun
</div>

sekain dan terim kasih