1

There are a lot of questions on here for this answered with "use this jQuery plugin ", but I can't use jQuery (due to my work security controls).

Is it possible to freeze headers in Sharepoint Lists without using jQuery?

  • this light weight code works pretty well except in edge if you add the edit button to the list. Works pretty good in IE though – James Jan 21 at 13:41
2

The following JavaScript and CSS code for your reference.

<style type="text/css">
#LZheading {
    HEIGHT: 28px;
    display:none;
}
.FixedHeader{
    margin-top: -200px; 
    position: fixed;
    background-color:lightGray;
    display:block !important
}
#LZheading>table>tbody{
    visibility:hidden;
}
</style>
<script type="text/javascript">
window.onload = function() {
    LZListScroll();
    document.getElementById("s4-workspace").onscroll=function(){
        var LZHead=document.getElementById("LZheading");
        if(this.scrollTop > 200){
            LZHead.classList.add("FixedHeader");             
        }else{
            LZHead.classList.remove("FixedHeader");         
        }
    }
};
function LZListScroll() {
    var LZmyTable=document.getElementsByClassName("ms-listviewtable")[0];
    var insertDiv=  document.getElementsByClassName("ms-csrlistview-controldiv")[0];    
    var LZHeadingDiv = document.createElement('div');
    LZHeadingDiv.appendChild(LZmyTable.cloneNode(true));
    LZHeadingDiv.id = "LZheading";
    insertDiv.parentNode.insertBefore(LZHeadingDiv,insertDiv.nextSibling);
}
</script>
  • I'm new to Sharepoint. How do I implement CSS code? – Alasdair Duncan Jan 10 '19 at 10:10
  • Add the code above(include CSS and JS) into a script editor web part in list view. – LZ_MSFT Jan 11 '19 at 1:08
  • Ok - this capability may have been disabled by my organisation... – Alasdair Duncan Jan 11 '19 at 13:02
3

No.

Freezing column headers in SharePoint list view is not possible using out of the box functionalities in SharePoint.

This concern is raised on SharePoint uservoice also. But it is not resolved yet, Freeze column header.

However this can be done using the custom javascript coding, maybe using jquery framework(Which you already know).

1

No, there is no OOB mechanism to freeze headers, so scripts are the solution to this issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.