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.
 
  1. "https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript">  
  2.   
  3. "text/javascript">  
  4.   
  5. $(document).ready(function(){  
  6. stickyHeaders()  
  7. })  
  8.   
  9. function stickyHeaders(){  
  10.     if( jQuery.inArray( "spgantt.js", g_spPreFetchKeys ) > -1)  
  11.     {  
  12.         SP.SOD.executeOrDelayUntilScriptLoaded(function ()   
  13.         {  
  14.             findListsOnPage();  
  15.         }, "spgantt.js");  
  16.     } else {  
  17.         findListsOnPage();  
  18.     }  
  19.     $(window).bind('hashchange', findListsOnPage);  
  20. }  
  21.   
  22. function findListsOnPage() {  
  23.     var lists          = $('.ms-listviewtable')  
  24.     var quickEditLists = [];  
  25.     var listViews      = [];  
  26.   
  27.     $(lists).each(function(i){  
  28.         if($(this).find('div[id^="spgridcontainer"]').length > 0 )  
  29.         {  
  30.             quickEditLists.push($(this))  
  31.         } else if( $(this).hasClass("ms-listviewgrid") == false )   
  32.         {  
  33.             listViews.push($(this))  
  34.         }  
  35.     })  
  36.   
  37.     if(quickEditLists.length > 0)   
  38.     {  
  39.         SP.GanttControl.WaitForGanttCreation(function (ganttChart) {  
  40.             initializeStickyHeaders(quickEditLists, "qe");  
  41.         });  
  42.     }  
  43.   
  44.     if(listViews.length > 0)   
  45.     {  
  46.         initializeStickyHeaders(listViews, "lv");  
  47.     }  
  48. }  
  49.   
  50. function initializeStickyHeaders (lists, type) {  
  51.     var top_old        = [], top_new        = [],  
  52.     bottom_old     = [], bottom_new     = [],  
  53.     stickies       = [], headers        = [],  
  54.     indexOffset    = 0 ;  
  55.   
  56.     var style = "position:fixed;" +  
  57.     "left:50px;" +  
  58.     "z-index:1;" +  
  59.     "background-color:beige;" +  
  60.     "box-shadow:3px 3px 5px #DDDDDD;" +  
  61.     "display:none"  
  62.   
  63.     $(window).unbind('resize.' + type);  
  64.     $(window).bind  ('resize.' + type, updatestickies );  
  65.   
  66.     $('#s4-workspace').unbind('scroll.' + type);  
  67.     $('#s4-workspace').bind  ('scroll.' + type, updatestickies );  
  68.   
  69.     $(lists).each(function()  
  70.     {  
  71.         headers.push($(this).find($('.ms-listviewtable tbody tr td:nth-child(2)')))  
  72.         //alert(headers.length);  
  73.     });  
  74.   
  75.     $(headers).each(function (i)   
  76.     {  
  77.         var table = $(this).closest("table");  
  78.         if(table.find("tbody > tr").length > 1)   
  79.         {  
  80.   
  81.             table.parent().find(".sticky-anchor").remove()  
  82.             table.parent().find(".sticky").remove()          
  83.   
  84.             var anchor = table.before('
')  
  •             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  
  •   
  •   
  •  
    •