http://webdeveloperswall.com/javascript/floating-sidebar-for-twentythirteen

Floating sidebar for twentythirteen

/*

http://webdeveloperswall.com/javascript/floating-sidebar-for-twentythirteen

*/
var jq=jQuery.noConflict();
var wdw_fs_status = "unaltered";
jq(window).load(function(){

    //if there is a sidebar, in the first place
    if( jq( "#tertiary.sidebar-container" ).length == 0 ){
        return false;
    }

    if( jq(window).width() < 1000 ){
        //in twentythirteen if the browser width is less than 1000px, 
        //the page becomes one columned and sidebar goes down, so no need to do anything
        return false;
    }

    jQuery(document).scroll(function(){
        /*
        1. if user has scrolled down more than the total effective height of the sidebar
        2. make the sidebar fixed position with bottom as 0
        3. calculate the left postion by calucalting sidebar's offset.left
        4. if the scroll is decreased to less than the total effective height of sidebar
            revert it back to its original condition
        */
        var sidebar_pl = jq( "#tertiary.sidebar-container .widget-area" );
        if( jq(document).scrollTop() > jq(sidebar_pl).outerHeight() ){
            if( wdw_fs_status=="unaltered" ){
                jq(sidebar_pl).css({
                    'position' : 'fixed',
                    'left'  : jq(sidebar_pl).offset().left + 'px'
                });
                wdw_fs_status = "altered";    
            }
            
            //the sidebar shouldn't overlapp with footer, stop it just before footer
            var content_bottom_pos = jq("#primary").outerHeight();
            
            /* 
            console.log( 'document.scrollTop : %o', jq(document).scrollTop() );
            console.log( '#primary bottom : %o', content_bottom_pos );
            */
            if( jq(document).scrollTop() > content_bottom_pos ){
                //we've now reached till footer, lets stop the sidebar
                var bottom = jq(document).scrollTop() - content_bottom_pos;
                var top = content_bottom_pos - jq(sidebar_pl).outerHeight();
                jq(sidebar_pl).css({
                    'position' : 'absolute',
                    'top' : top + 'px',
                    'bottom':'auto'
                });
                wdw_fs_status = "altered";
            }
            else{
                jq(sidebar_pl).css({
                    'position' : 'fixed',
                    'bottom' : '0',
                    'top':'auto'
                });
            }
        }
        else{
            if( wdw_fs_status=="altered" ){
                jq(sidebar_pl).css({
                    'position' : 'relative',
                    'bottom' : 'auto',
                    'left'  : 'auto'
                });
                wdw_fs_status = "unaltered";
            }
        }
    });

});