Freeze SharePoint List/Library Headers Using Sticky Header.JS

One of the common requirements while having a list/library with 100+ items and 10+ columns in one single view is that the header cannot be seen when the vertical scroll bar is used. On dragging down the header which is fixed at top will move upwards and cannot be seen.



In the initial state the header is seen as the vertical scroll bar is not used. However on dragging down the header moves up along with the data and the user will have a hard time figuring out the Data - Metadata relation.



As you can see above the header goes missing. In order to work around this issue we can use a jQuery Plugin called StickyHeaders.js to freeze the header in place.

Let’s see how we can implement this.

Goal: Add a new Page in SharePoint and add the Document library App and the Content Editor Web part which contains the JS to Freeze the header.

Firstly, let’s download the Sticky header js file from here and upload it to anywhere in SharePoint, say site assets.

Now create a new Page by selecting Add a page as below:



Go to Site Settings, then Edit Page.



Add the Document Library which contains our data.



Now let’s add Content Editor Web Part from the Media and Content Section.



Click on Edit Source.



Add the reference to the JS Script we have uploaded into SharePoint.

Save it and go back to the page we created. We can see that the header is now in static and freeze state. Vertical scrolling will float the header as the scroll bar in scrolled down. The header retains the Out of the Box functionalities like sorting and filtering.



Currently this implementation will freeze the header for only the on page document library. If you want to implement this for the entire list/library within the site collection, you can place this in the Master Page. This has been tested with Share Point 2013 and 2016 Preview.

You can watch a demo of the implementation here.