Sticky left sidebar shrink & right side bar expand when reached top edge of browser

Question

Good day, I need a little coding help, I just put a simple sticky blogger code on my blog. It's working nice but there's just one thing need to be fix. When the sidebars reached the top browser edge the left shrinks a bit and the right expand next to the scroll bar. What changes should I do to make the two sidebars remain the same up to the edge. Below is the code I used in my blogger blog.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(function() {
    var ks_widget_top = $('#widget Id').offset().top;
    var ks_sticky_widgets = function(){
        var ks_current_top = $(window).scrollTop(); 

        if (ks_current_top > ks_widget_top) { 
          $('#widget Id').css({ 'position': 'fixed', 'top':0, 'z-index':999999 });
        } else {
            $('#widget Id').css({ 'position': 'relative' }); 
        }   
    };
    ks_sticky_widgets();
      $(window).scroll(function() {
         ks_sticky_widgets();
    });
});</script>

Answer 1

I went through the code of your blog. Seems that instead of changing the position of the #sidebar-right-1 use .main-inner.column-left-outer

<script type="text/javascript"> 
$(function() {
    var ks_widget_top = $('#widget Id').offset().top;
    var ks_sticky_widgets = function(){
        var ks_current_top = $(window).scrollTop(); 

        if (ks_current_top > ks_widget_top) { 
          $('.main-inner.column-left-outer').css({ 'position': 'fixed', 'top':0, 'right': 'auto', 'z-index':999999 });
        } else {
            $('.main-inner.column-left-outer').css({ 'position': 'relative' }); 
        }   
    };
    ks_sticky_widgets();
      $(window).scroll(function() {
         ks_sticky_widgets();
    });
});</script>

Just let me know if this works