Advertisements

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.
Note: You can also just copy and paste the script at the bottom of this post into notepad and save it as StickyHeaders.js in your Site Assets folder)

B. Edit the page of the list (settings icon –> edit page).
chrome_2018-07-20_09-22-11

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).
chrome_2018-07-20_09-23-35

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

Want for format the header row with colors and font styles? Here’s how.
2018-07-20_09-51-42


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.
Note: You can also just copy and paste the script at the bottom of this post into notepad and save it as StickyHeaders.js in your Site Assets folder)

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 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

39 Comments

  1. Ray

    Reply

    I have tried implementing the stickyheaders.js script but have had no luck. using a webpart it just shows the script content. Trying to use it in the master pages (edited both oslo and seatlle) has no effect that I can tell. I am trying to implememetn on an Office 365 sharepoint list. In the master pages I followed your steps for custom.js. but no luck getting the stickyheaders to work. Any help would be greatly appreciated.

    • Reply

      Try downloading the script again. I’ve just added opening and closing tags around the StickyHeaders script which may help prevent it from rendering as script text in the CEWP.

  2. Miles

    Reply

    Hi, thanks to your instructions I finally got it to show up for a web part. Question: is it possible to get this to work when viewing/editing the list when it isn’t added as a web part. I.e. if you go to Site Contents and then click on the list object and it opens the part when you can edit the list.

    • Reply

      Hi Miles, that’s good news. As for the “main” list vs webparts, this solution will only work for “main” lists in classic view. If you’re in classic view, you should be able to do Settings –> Edit Page –> Add a web part above the list.

  3. Reply

    hi It’s working good. But the only issue is the labels are moved a bit closer so the values of one field appear to be under other field. Please let me know where I should change

  4. Reply

    basically I have to scroll the bar to right to see the remaining but the scroll bar is also not displayed when sticky headers are displayed

  5. lyn.diaz@viasat.com

    Reply

    I was able to implement this solution but others on my team are unable to see the changes when accessing the list.

    • Reply

      Make sure you set permissions on the script or site assets folder so that they can “read” the script or folder its in. As long as they can access the script itself, it will render the result wherever you’re implementing it.

      • Lyn

        Reply

        Thanks for the update. I figured it was a permissions issue at first but that looked fine. I just double checked with my team member and she does have access to the Site Assets library and can see the Sticky Headers js file.

        our only difference is that I am a site owner and she’s just a member.

        • Reply

          You may have already done this too, but just in case. The script will need referenced on each view of a list. Each view is like a new page in that way. You might also check member permissions on the site level where site assets is. Sometimes I’ll troubleshoot by placing a demo account in the member group, verifying the issue, then moving the demo account to the owner level to confirm it is permissions. Then you can tweak to figure out where a block might be for that member group between the list and the script. Also might explore browsers and see if you notice any blocks or differences. Just some ideas. Good luck!

      • Lyn

        Reply

        I did a little more digging and found something is being blocked at a higher level, so it is a permissions issue. Thanks so much for the quick response.

  6. Jakub

    Reply

    Can I get the js file into my mailbox? The link is somehow blocked by our proxy.

    • Reply

      I’ve just added the code itself to the bottom of the post. You should be able to copy and paste it into notepad, save as StickyHeaders.js, add to your Site Assets folder and go from there. Good luck!

  7. Jakub

    Reply

    Thank you very much. That helped a lot cos the file was opening by default in OneDrive. I think I also encountered an issue by implementing it. Everything is working fine in all the lists and views except for using the solution in a “Data sheet” view with permission below admin/moderator -> e.g. for member without delete the solution is not displayed/available. Do you have an idea what might be the reason?

  8. Kris

    Reply

    Nate – this is so darn handy, and it was kind of you to post this. Is it possible to change the headers to be set in a bold font, too?

  9. Jasmine

    Reply

    Hi, I’ve downloaded this version, stickyHeaders_3.2.0.js to a mapped drive that was provided by the page at ” Design Manager: Upload Design Files “. Approved and published a major version for my custom master page that references to the stickyheaders js. But this will only work for Views (of the same document library) that I have added a Script Editor web part to a View’s Edit Page and the headers sticks and works well.

    However, only Site Collection aministrator like me can see the effect. Permission issue? Where can I issue proper permision to all visitors?

    For each View, if I don’t add a Script Editor with the same referce to the stickyHeaders_3.2.0.js then that View will not show the stickyheader. I thought adding the script reference in the master file is just so it will work for all pages/views that uses the master file which already refereced the stickyHeaders_3.2.0.js?

    Thank you

  10. Ashutosh

    Reply

    This worked but there is one catch. If I have Headings written in CWPE then both floating menu and heading disappers

  11. Ney Tangoa

    Reply

    Hi, I used the js but I had problems the moment the header makes the “fix” the size of my changes you know what is this?

  12. Jeremy Fulton

    Reply

    Hello Nate – Looking to see if you’ve had any luck implementing this outside of the classic view? I have some JSON I’m using to convert stoplight colors to indicators that get’s lost in classic view.

      • Reply

        Hi. I tried replacing the content with V3.2.0.. unfortunately after I refresh the script is getting displayed on top the page instead of the headers. Please let me know what could be the issue.

  13. Marshall

    Reply

    Hi Nate,

    Great product.

    I am using Chrome Version 65.0.3325.181 (Official Build) (64-bit) with SharePoint online and the sticky headers are working great.

    When I go to Print to PDF, the floating headers appear rendered in the middle of the page, and block content that I want to see.

    Is there an update to fix this? I understand it may not be possible since it’s most likely a problem with the PDF rendering engine, not the js you wrote.

    A possible solution is to read in when a print request is made with javascript, and to turn off the floating header code when a print request is made. I am looking into that now.

    Thanks for your advice!

  14. Murugan

    Reply

    Hi Nate,

    I would like to color complete header with a specific color. Is there any way we can achieve this?

    Thanks for this post. It worked as expected.

  15. Murugan

    Reply

    Hi Nate,

    Increased font size and found this is really fantastic. If we can change the color of the sticky header then this will give complete look.

  16. Pingback: Customize styles/formatting of SharePoint list column header rows – SharePoint Librarian

  17. Nicholas Huelskamp

    Reply

    So, I’ve tried to figure it out on my own, but seem to be failing at doing so. While I can implement this on our site, when I try to add a new item to the list it’s affecting the sticky/floating heading stops working. Any ideas?

  18. Andy

    Reply

    Hi Nate,
    the js-file isn’t online any more. Could you pls upload again?
    Thanks

  19. Grego

    Reply

    Terrific code but instructions on how to implement are the greatest part of the post. I had some help to orient someof my column headers vertically (270deg). Now they’re too tall for the box the sticky headers sit inside. Where is the dimension of the sticky header box defined. Hopefully I can adjust it myself until it fits my vertical column titles.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: