Make a panel sticky using jquery

makePanelSticky

/*Use case
     Define styles for before floating and when floating as below.

     .panel-static {
        position: relative;
        left: 0px;
        z-index: 200;
        width: 260px;
        height: 500px;
        float: left;
     }

     .panel-isfloating {
        position: fixed !important;
        z-index: 2000 !important;
        opacity: 0.95 !important;
        filter: alpha(opacity=95) ;
        margin: 0px !important;
        left: 34px !important;
        top: 0px !important;
    }
    
    .horizontal-floating{
        position: fixed !important;
        left: 0px;
        width: 350px;
    }
    
     makePanelSticky(".panel-static","panel-isfloating");
*/

var makePanelSticky = function(panelClassSelector,panelFloatingClass){
        var searchHeader = $(panelClassSelector);
        var headerTop    = searchHeader.offset().top;
        var headerLeft   = searchHeader.offset().left; 

        $(window).scroll(function(event){
            var floatingEventTimer = null;
            var resetTop = null;
            var resetLeft = null;
            var horizontalFloatingClass = "horizontal-floating";
            var placeholderId = null;

            var addPlaceHolder = function(node){
                var nodeHeight = node.height();
                var nodeWidth = node.outerWidth(true);
                var nodeCssfloat = node.css("float");
                var nodeCssdisplay = node.css("display");
                var randomNum = Math.ceil(Math.random() * 9999); /* Pick random number between 1 and 9999 */
                placeholderId = "stickyPanelSpace" + randomNum;
                PanelSpacer = $("<div id='" + placeholderId + "' style='width:" +nodeWidth + "px;height:" + nodeHeight + "px;float:" + nodeCssfloat + ";display:" + nodeCssdisplay + ";'>&#20;</div>");
                node.after(PanelSpacer);
            }

            var stickHeader = function(event){

                var headerHeight = searchHeader.height();
                var reachedTop   = false;
                var currentScrollLeft = $(window).scrollLeft();
                var currentScrollTop = $(window).scrollTop();

                // //handle vertical scrolling
                if(currentScrollTop > headerTop){

                    //remove horizontal scrolling
                    if(searchHeader.hasClass(horizontalFloatingClass)){
                        searchHeader.removeClass(horizontalFloatingClass);
                        $(panelClassSelector).removeStyle("top");
                    }                        

                    if(!searchHeader.hasClass(panelFloatingClass)){
                        addPlaceHolder(searchHeader);
                        searchHeader.addClass(panelFloatingClass);
                    }

                    reachedTop = false;
                }

                if(currentScrollTop<headerTop || currentScrollTop==0) {
                    searchHeader.removeClass(panelFloatingClass);
                    $("#"+placeholderId).remove();
                    reachedTop = true;
                }

                //handle horizontal scrolling
                if(!searchHeader.hasClass(panelFloatingClass) || reachedTop===true){

                    if(currentScrollLeft > headerLeft && currentScrollTop < headerTop){
                        if(!searchHeader.hasClass(horizontalFloatingClass)){
                            searchHeader.addClass(horizontalFloatingClass);
                        }

                        $(panelClassSelector).css("top",headerTop-currentScrollTop); 
                    }
                    else if(currentScrollLeft <= headerLeft ){
                        searchHeader.removeClass(horizontalFloatingClass);
                        $(panelClassSelector).removeStyle("top");
                    }
                }
            };

            return function(){
                //stick message search box if past it.                    
                clearTimeout(floatingEventTimer); 
                floatingEventTimer = setTimeout(stickHeader, 5); 
            };
        }());
    };
    
    //jquery addition
    //remove individual style
    (function($)
    {
        $.fn.removeStyle = function(styleToRemove)
        {
            var search = new RegExp(styleToRemove + '[^;]+;?', 'g');
    
            return this.each(function()
            {
                var currentStyle = $(this).attr('style');
                
                if(!currentStyle){
                    return true;
                }
                
                $(this).attr('style', function(i, currentStyle)
                {   
                    return currentStyle.replace(search, '');
                });
            });
        };

    }(jQuery));