Sticky columns when scrolling right

Question

The code in the below link works fine to display sticky Column headings

 

http://www.enjoysharepoint.com/Articles/Details/steps-to-freeze-header-row-for-title-in-sharepoint-2013-21223.aspx

 

I modified this code such that it displays the first column when i scroll to the right. But it is not working properly.

 

i have attached the resulting image and below is the modified javascript code.

 

Kindly please help.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">

$(document).ready(function(){
stickyHeaders()
})

function stickyHeaders(){
    if( jQuery.inArray( "spgantt.js", g_spPreFetchKeys ) > -1)
    {
        SP.SOD.executeOrDelayUntilScriptLoaded(function ()
        {
            findListsOnPage();
        }, "spgantt.js");
    } else {
        findListsOnPage();
    }
    $(window).bind('hashchange', findListsOnPage);
}

function findListsOnPage() {
    var lists          = $('.ms-listviewtable')
    var quickEditLists = [];
    var listViews      = [];

    $(lists).each(function(i){
        if($(this).find('div[id^="spgridcontainer"]').length > 0 )
        {
            quickEditLists.push($(this))
        } else if( $(this).hasClass("ms-listviewgrid") == false )
        {
            listViews.push($(this))
        }
    })

    if(quickEditLists.length > 0)
    {
        SP.GanttControl.WaitForGanttCreation(function (ganttChart) {
            initializeStickyHeaders(quickEditLists, "qe");
        });
    }

    if(listViews.length > 0)
    {
        initializeStickyHeaders(listViews, "lv");
    }
}

function initializeStickyHeaders (lists, type) {
    var top_old        = [], top_new        = [],
    bottom_old     = [], bottom_new     = [],
    stickies       = [], headers        = [],
    indexOffset    = 0 ;

    var style = "position:fixed;" +
    "left:50px;" +
    "z-index:1;" +
    "background-color:beige;" +
    "box-shadow:3px 3px 5px #DDDDDD;" +
    "display:none"

    $(window).unbind('resize.' + type);
    $(window).bind  ('resize.' + type, updatestickies );

    $('#s4-workspace').unbind('scroll.' + type);
    $('#s4-workspace').bind  ('scroll.' + type, updatestickies );

    $(lists).each(function()
    {
        headers.push($(this).find($('.ms-listviewtable tbody tr td:nth-child(2)')))
        //alert(headers.length);
    });

    $(headers).each(function (i)
    {
        var table = $(this).closest("table");
        if(table.find("tbody > tr").length > 1)
        {

            table.parent().find(".sticky-anchor").remove()
            table.parent().find(".sticky").remove()

            var anchor = table.before('<div class="sticky-anchor"></div>')
            stickies.push($(this).clone(true,true).addClass("sticky").attr('style', style).insertAfter(anchor))

            var tbodies = $(this).parent("thead").siblings("tbody")
            if(tbodies.length > 1)
            {
                tbodies.bind("DOMAttrModified", function(){
                    setTimeout(function(){
                        $('#s4-workspace').trigger("scroll", true)
                    }, 250)
                })
            }
        } else {
            headers.splice(i-indexOffset,1)
            indexOffset++;
        }
    })

    //Do it once even without beeing triggered by an event
    updatestickies();

    function updatestickies (event, DOMchangeEvent)
    {
        $(headers).each(function (i) {
            if(DOMchangeEvent)
            {
                width();
                return false;
            }

            function width()
            {
                stickies[i].height(headers[i].height()).find('td:nth-child(2)').each(function () {
                    $(this).height(headers[i].find('td:nth-child(2)').height())
                })
            }

            top_old[i]    = top_new[i]
            top_new[i]    = Math.round($(this).offset().left - 45)
            bottom_old[i] = bottom_new[i]
            bottom_new[i] = Math.round(top_new[i] - 30 + $(this).closest('table').width())
            var x=1;

            stickies[i].offset({
                top: Math.round(headers[i].closest("td").offset().top)

            });

            if(top_old[i] >= 0 && top_new[i] <= 0 || bottom_old[i] <= 0 && bottom_new[i] >= 0 || top_old[i] === undefined && bottom_old[i] === undefined&& top_new[i] < 0 && bottom_new[i] > 0 )
            {
                width();
                stickies[i].fadeIn();
            }
            else if (top_old[i] <= 0 && top_new[i] >= 0 || bottom_old[i] >= 0 && bottom_new[i] <= 0 )
            {
                stickies[i].fadeOut();
            }
        })
    }//update stikies
}//initialize sticky headers


</script>