A popular request was to have sticky headers for lists in SharePoint 2013. This is very useful if you have long lists with loads of columns. Sometimes the user cant remember what a value in one of those uncountable column stands for and has to scroll all the way up (if there’s no pagination). To help those users I wrote a small script that glues the header right underneath the gray bars on top in case the lists header scrolls out of view.

The sticky headers keep all their functionality (like ‘sort’ and stuff like that). They also scroll vertically with the window and adjust their size when the column width suddenly changes (can happen on views with grouping) or when the windows is resized. And last but not least they have some eye candy in terms of a fade-in and fade-out animations.

Images

Enough text, let’s see some pictures!

Sticky header for a single list

Sticky headers for multiple lists at the same time

The sticky header keeps its full functionality

Sticky Headers in action (animated GIF)

The Code

And here’s the code, there’s definitely some room for improvements but for now it’s working quite good:

Please note: I have removed the code from this post in order to ensure that you always get the latest version. Please hit the link at the end of this post to go to the download section and download the script from there. Thanks!

Put this code into your masterpage and all lists in your SharePoint will have these nice and sticky headers or embed the code only on a specific page if you don’t want to have this feature site-wide. Pleaes note that this script requires jQuery.

Many thanks to Yu-Jie Lin and the blog at http://blog.yjl.im/ for the good starting point!

I would be glad to hear some comments from you if you like the solution (and even more if you don’t like it and have some tips on how to improve it).

Click here to download the script