Sharepoint - How to make a custom list have sticky/floating headers
You can try using Sticky Headers for SharePoint 2013. I would experiment with using it on just one page, list, or library to start with, and then if you like it, you can decide whether or not not to use it for your whole site. Below is how to do that.
Download Script Files
To use the Sticky Headers, first you need to download the StickyHeaders_v2.9BETA.js
file from their downloads page. Then you'll also need to download jQuery. So the steps are to:
- Download
StickyHeaders_v2.9BETA.js
file. - Download
jquery.min.js
file.
Add the Script Files to a List Page
- Upload the scripts to your SharePoint site. Click on the gear icon in the top-right corner and then
Site Contents
. Upload the scripts you just downloaded into a document library, such asSite Assets
. You can upload them to an existing library or create a new library. - Copy the location of the scripts you just upload to Notepad. Open up Notepad or another text editor (but not Word). Then go back to SharePoint and in the document library where you just uploaded the script files. In Internet Explorer, right-click on one of the file names and select
Copy shortcut
from the popup context menu. Paste this link in Notepad. Repeat the process for the other script file. - Go the page that has the long list and put the page in
Edit
mode. Click on the gear icon in the top-right corner and thenEdit page
. - Add a Script Editor Web Part to the page. In the Ribbon click the
Insert
tab thenWeb Part
to open the Web Part panel. On the left column click theMedia and Content
category. In the middle column clickScript Editor
. (Here are some instructions for how to do this with screenshots) Add your script references to the Script Editor Web Part. In the web part, click
Edit Snippet
and then add the following script references (make sure to you put in the locations to your script files):<script type="text/javascript" src="http://yoursite/sites/yourlibrary/jquery.min.js"></script> <script type="text/javascript" src="http://yoursite/sites/yourlibrary/StickyHeaders_v2.9BETA.js"></script>
EDIT: Here's a source for referencing scripts -- see the section titled "Attribute Values" to see if that helps you understand how to reference your script files.
- Save the Script Editor Web Part and the page. On the web part, click
Insert
to save the script references. Then click theSave
button in the right-hand corner on the page to save the page.