Freeze the header columns for list in SharePoint

Question

I'm working with a piece of code that are supposed to "freeze" the header column so when user has to scroll down, the headers remain visible and the user know what he or she is looking at.

I have used the below code:

<style>
.ms-viewheadertr {
    BACKGROUND-COLOR: white
}
</style><script>

/* wrap the table in a div, set its height, give it scrollbars, and move it down */
    var myTable = document.querySelector(".ms-listviewtable");
    var wrapperDiv = document.createElement('div');
    wrapperDiv.setAttribute("ID","FreezePaneWrapper");
    wrapperDiv.setAttribute("style","OVERFLOW: auto; HEIGHT: "+ (document.documentElement.clientHeight - document.getElementById("s4-bodyContainer").clientHeight - document.getElementById("s4-ribbonrow").scrollHeight - 50) +"px; padding-top:38px;");
    wrapperDiv.appendChild(myTable.cloneNode(true));
    myTable.parentNode.replaceChild(wrapperDiv,myTable);
/* Freeze the header row and move it up*/
    var headerRow = document.querySelector(".ms-viewheadertr");
    document.getElementById("FreezePaneWrapper").style.width = "" + headerRow.clientWidth + "px";
    headerRow.style.width = "" + headerRow.clientWidth + "px";
    headerRow.style.position = "absolute";
    headerRow.style.top = ""+(headerRow.offsetTop-39)+"px";
/* Tell the header's columns to be the same width as the cells in the first "alternating" row */
    var columns = document.querySelector("table.ms-listviewtable tr.ms-alternating").querySelectorAll("tr>td");
    headers = document.querySelectorAll("tr.ms-viewheadertr th");
    for(var i = 0; i < headers.length; i++){
        if(columns[i].clientWidth > headers[i].clientWidth){
            headers[i].style.width = ""+columns[i].clientWidth + "px";
        }else{
            columns[i].style.width = ""+headers[i].clientWidth + "px";
        }
    }

</script>

The problem is that when the list get's loaded, the column freeze work fine but the data in the column get shifted a little to the left which does not looks good.

Could someone please help me to fix this?

Answer 1

I have used sticky headers jquery plugin to freeze the column header in the list/libraries.

You may find the full article in the below link http://spoodoo.com/sticky-headers-in-sharepoint-2013/

Download the JavaScript file here http://spoodoo.com/download/javascripts/stickyheaders/stickyHeaders_3.1.0.js

Answer 2

@brishal The below script will help you,kindly add your list name in the script,add it to a CEWP and place it below the list and make it hidden:

<style type="text/css">
#TTNheading {
    OVERFLOW: hidden;
    HEIGHT: 28px;
}

#TTNlist {
    HEIGHT: 400px;
    OVERFLOW-X: auto;
    OVERFLOW-Y: scroll !important;
}</style><script type="text/javascript">

_spBodyOnLoadFunctionNames.push("TTNListScroll");

function TTNListScroll() {
    var SummaryName = "Enter your List name here"; //Enter your List name here
    var TTNmyTable;
    var TTNListDiv = document.createElement('div');
    var TTNHeadingDiv = document.createElement('div');
    var tables = document.getElementsByTagName("TABLE");
    for (var i = 0; i < tables.length; i++) {
        if (tables[i].summary.indexOf(SummaryName)!=-1) {
            TTNmyTable = tables[i];
            break;
        }
    }
    if(TTNmyTable == undefined)  {                   
        return;
    }
    TTNHeadingDiv.appendChild(TTNmyTable.cloneNode(true));
    TTNHeadingDiv.id = "TTNheading";
    TTNListDiv.appendChild(TTNmyTable.cloneNode(true));
    TTNListDiv.id = "TTNlist";
    TTNListDiv.width = "100%";
    var TTNnode = TTNmyTable.parentNode;
    TTNnode.replaceChild(TTNHeadingDiv, TTNmyTable);
    TTNnode.appendChild(TTNListDiv);
    TTNListDiv.childNodes[0].rows[0].style.visibility = 'hidden';
    TTNHeadingDiv.childNodes[0].style.width = TTNListDiv.childNodes[0].offsetWidth;
}</script>