Adding sticky/floating headers to a SharePoint list

Outcome:

stickyheadersbeforeafter

Intro:

Large lists carry with them a number of challenges, one being the ease of keeping everything straight when you’re thirty scrolls deep into a page. Sticky/floating headers are an excellent addition to your SharePoint lists that keep your headers at the top of your columns no matter where you’re at in the list for ease of viewing. This solution uses a script created by Daniel Stölzner of spoodoo.com and I’ve added a reference to jquery to simplify steps for those of you without jquery built into your master page.

Let’s Do It:

As with most solutions, we have the option to apply this solution to either one or few lists using Content Editor Web Parts (CEWP) or to all lists by editing the master page. I’ll go through the steps of both methods in this post, starting with the CEWP approach.


CEWP (one or few lists)

A. Download this js file and add it to your Site Assets folder via SharePoint Designer or by uploading to Site Assets via SharePoint Online.

B. Edit the page of the list (settings icon –> edit page).

C. Create a content editor web part on the list(s) you’d like to have sticky/floating headers. (Add a web part –> media and content –> content editor –> add).

D. Edit the content editor.

edit web part.png

E. Add path to newly uploaded script (something like /[SITEURL]/SiteAssets/StickyHeaders.js) and click OK.

addscriptreferencetowebpart.png

F. Stop editing page.

stopediting

G. That’s it! Now when you scroll down your list far enough that the actual headers disappear, your floating headers should appear at the top.

stickyheadersbeforeafter


Master Page

A. Download this js file and add it to your Site Assets folder via SharePoint Designer or by uploading to Site Assets via SharePoint Online.

B. See my post on editing a copy of your master page. We’ll be following the best practice of editing the master page just to add a reference to a custom.js file, explained at the bottom of the post. Then following the directions earlier in the same post, make sure you’ve referenced your custom.js file just before the closing </head> tag in your master page script. You’ll also see directions on uploading your master page again.

C. Once you’ve uploaded your master page successfully, your changes should be reflected immediately.

Now every list on your site should have sticky/floating headers! Comment or tweet me if you run into any issues and I’ll happily help out.

stickyheadersbeforeafter

Advertisements