I'm currently looking for a new job, preferably in the Asia-Pacific region but I would consider other regions as well. If you are hiring or have any leads, I would appreciate if you would drop me a message via the
contact form, e-mail (daniel(at)spoodoo.com),
Twitter, or
LinkedIn.
Daniel
This script will make every list’s header sticky. This means that it will stick to the bottom of SharePoint’s ribbon when it would otherwise disappear behind it. Keeping the header visible at all times can greatly enhance the usability, especially of large lists.
The script supports the normal list view, fixed height lists, list in quick edit mode, grouped lists, and all kinds of system lists like the list on the permissions page or site features page.
The sticky headers keep their full functionality so you can use them so sort, filter, etc.
Should you have any questions, problems or bug reports please head straight to the comment section below or to the Forum.
Related Blog Posts:
•Sticky Headers in SharePoint 2013
•(Updated) Sticky Headers for SharePoint 2013 – v2.0
Compatibility: SharePoint 2013 on-premises and SharePoint Online, SharePoint 2016 on-premises untested
Browser compatibility: All major browsers
Current Version: 3.2.0
Last Update 19th of July, 2017
Size: < 12kb (unminified)
Dependencies: jQuery
Notes: You will have to deactivate Minimal Download Strategy if you implement this script not via the masterpage.
Star
Go To Downloads
Here you can see the script in action in different situations:
Download and Changelog
| Version | Changes |
|---|
stickyHeaders_3.2.0.js
Size: 11.8 KiB
Downloads: 11548
Date: July 19, 2017 | - Fix: Fixed a bug where Sticky Headers are not working in Datasheet-view when the user has less than Edit-permission
- New feature: Implemented a function that will load jQuery for you if it is not already loaded. No need to load jQuery via a separate script-tag any longer.
NOTE: Uncomment line 23-29 and remove or comment out line 32-50 if you don't want this feature - Improvement: Added some semicolons for a better minification performance
- Cosmetic fix: Corrected a typo
|
StickyHeaders_3.1.1.js
Size: 10.9 KiB
Downloads: 7001
Date: May 27, 2016 | - Fix: Sorting in quick edit mode when the list is scrolled down now works properly
- Fix: Strict mode will not cause an error with this script anymore
|
stickyHeaders_3.1.0.js
Size: 10.1 KiB
Downloads: 1141
Date: May 4, 2016 | - Fix: The header doesn't adjust to screen resizing
- Fix: The header suddenly disappears when scrolling through a grouped list
- Fix: Lists which have the Newsletter or Shaded style or are rendered on the server are not correctly displayed when sticky headers are displayed
- Improved: Some minor cosmetic issues
|
stickyHeaders_3.0.1.js
Size: 10.3 KiB
Downloads: 666
Date: April 22, 2016 | - Fix some speed problems with lists which have a large amount of columns
- Adopt semantic versioning scheme
|
stickyHeaders_3.0.js
Size: 9.8 KiB
Downloads: 994
Date: March 4, 2016 | - 2nd rewrite
- the sticky header now keeps its full functionality in quick edit mode
- greatly enhanced performance due to simplification of the code (reduced size by 3kb)
- better compatibility with SharePoint's administration lists
|
StickyHeaders_v2.9BETA.js
Size: 12.3 KiB
Downloads: 3389
Date: May 29, 2015 | - Script was completely rewritten
- When there is only one list view webpart one a page and no other webpart, SharePoint will by default show the corresponding ribbon of this list. If you embed the script via a webpart you will usually break this behavior. The script now restores this intended behavior
- Lists with fixed height are now supported
- Grouped list views are now supported
- Better general performance
- Better compatibility with all kinds of list views (custom and system)
- Small adjustments to the positioning of the sticky header
- The boxes for filtering and sorting are now properly handed over to the sticky header and vice versa
|
StickyHeaders_v2.8.js
Size: 6.4 KiB
Downloads: 3208
Date: June 11, 2014 | - removed reinitialization of sticky headers when clicking somewhere on the page or selecting an item right after page load
- fixed selectAll button not working (still a bit unreliable)
- fixed filter menu does not disappear on some occasions
|
StickyHeaders_v2.7.js
Size: 5.9 KiB
Downloads: 635
Date: May 20, 2014 | - force SharePoint to show the Item- and List/Library-Tab in the Ribbon if there is only one list on the page (only necessary if the script is not loaded via the masterpage)
|
StickyHeaders_v2.6.js
Size: 5.1 KiB
Downloads: 571
Date: April 30, 2014 | -
improved compatibility with system lists
-
removed a deprecated function
-
removed a bug which can occur when grouping is activated
|
StickyHeaders_v2.5.js
Size: 5.1 KiB
Downloads: 561
Date: April 7, 2014 | - fixed a bug in IE where filter boxes appear at a wrong position
- fixed a bug that causes the script to stop working when you scroll immediately after switching into quick edit mode
- added an event listener which causes the script to reload when you toggle SharePoint's fullscreen mode
- a few general code improvements
|
StickyHeaders_v2.4.zip
Size: 3.0 KiB
Downloads: 386
Date: March 17, 2014 | - fixed a bug where where the script stops working when you switch from a listview into quickedit mode
- fixed a bug where the popout menu is cloned and won't disappear anymore when the sticky header fades in while the popout menu is open
- simplified parts of the code
|
StickyHeaders_v2.3.zip
Size: 3.1 KiB
Downloads: 289
Date: March 14, 2014 | - fixed a bug introduced in the last version which caused the sticky headers to not scroll vertically anymore
|
StickyHeaders_v2.2.zip
Size: 3.2 KiB
Downloads: 296
Date: March 13, 2014 | - fixed another bug that caused the header to be shifted to the right hand side
|
StickyHeaders_v2.1.zip
Size: 3.1 KiB
Downloads: 309
Date: March 7, 2014 | - fixed a bug where the sticky header is in a wrong position after flipping through a paginated list
|
StickyHeaders_v2.0.zip
Size: 3.1 KiB
Downloads: 64
Date: February 27, 2014 | - fixed a bug where the header does not disappear again
- added compatibility with quick edit mode
|
stickyheaders_v1.zip
Size: 1.8 KiB
Downloads: 413
Date: February 27, 2014 | - initial release
|
Great Job!
Hi,
Sticky Headers is working fine , great job, When we scroll down List headers are Visble.
I have one requirement , when we scroll horizontally in list 3 columns should be Freeze . their is any way .
Could you please any one.
Thanks,
Santhosh
I have always wondered how to do this as well! If you find out could you please let me know?
Great work. We are in need of this too. Freezing the first few columns would be great. Any plans on adding this? I have tried but with great failure.
Thanks.
I have Sharepoint 2010 site does this script work in 2010 ?
It will not work. It's only for SharePoint 2013 and up.
Works great with Headers. It would be great if it works to freeze first few columns. Any plans on adding this?
Thanks.
Thank you for that useful script!!
It works great.
I only have the problem, that sometimes the header jumps to the right side.
I couldn’t figure out why yet. Not a big problem anyway.
Regards,
Harry
Hi Harry,
Thanks for your comment.
I think I fixed this bug. I updated the code up there and added version 2.1 to the download section!
please give it a try!
Thank you so much for your effort!!Unfortunately I still get the same behaviour. It has to be something in SharePoint itself, because even if I set a fix value for the left value”stickies[i].offset({ left: 200″ the header jumps to the right in some cases. So I think there’s something in SharePoint which overwrites the values..?Tested on two environments, all custom features deactivated, masterpage reset to site definition, different browsers tested…
That is very strange. I am not able to reproduce this here on my environment. Maybe you can tell me a bit more about when this happens, or is it completely random?
I have Sharepoint 2010 site does this script work in 2010 ?
It will not work. It's only for SharePoint 2013 and up.
Hi Harry,
I could finally reproduce your problem and It’s fixed now. Please download version 2.2 and give it a try. I would be happy to hear from you if it solved your problem!
Hi bro thanks lot
it's working fine for me.
Thanks again for your great effort.
works great, but when i click on a filter the options are displayed above the header (out of my view). any idea how i can fix that?
Hi Harry,
I recommend using the newer version of this script and check if it shows the same behavior. I didn’t experience anything like that so it might be that another script on your SharePoint installation interferes.
This is great. Just what my users are looking for. I believe I have found an issue though. When you have a list with enough columns where you are forced to scroll to the right, the sticky headers stick in place even though you are scrolling to the right. End result being sticky headers over incorrect columns. Can this be fixed?
Again – great solution! Speaking of solution, any way you could wrap this into a SharePoint WSP to deploy as a solution?
Hi Brian,
Thanks!
I just realized that the fix for Harry’s problem caused the header to stop scrolling vertically. v2.3 fixed this and is available on the download page.
PS: I’ll try to wrap it up in a WSP soon!
Wow, thanks for the quick response! The header problem when scrolling left/right is fixed, but now the header don’t appear when in Quick Edit mode.
Actually, to be more specific, the sticky headers don’t work now when you switch from a regualr view to Quick Edit. If you go directly to a quick edit view though (with querystring of ShowInGrid=True), then it works.
I should invest more time into testing. Sorry for the trouble! I updated the script again (v2.4) and this time EVERYTHING should work.
Wow – you rock. Thank you so much!
Thank you so much Daniel!
You’re the best.
I didn’t have the chance to test it yet, but I’ll confirm it soon!!
Thanks again and take care.
Hello,
I succesfully tested the script now.
The header is not jumping to the right anymore :)
Again, thank you so much!
There’s only one little thing left: If I click on a filter, the selection frame opens above the header (out of view):
http://www.directupload.net/file/d/3566/oo76vosh_png.htm
Hello Harry,
this bug has been fixed in the latest version (v2.5) !
http://spoodoo.com/downloads/versions-changelog-stickyheaders/
Thanks for your effort Daniel!
That is really a nice solution!
Is there a code that I can simply copy and paste into content editor for a custom list in SP2013?
Yup, just copy the code from above.
But I highly recommend using the new version that you can find here: http://spoodoo.com/sticky-headers-sharepoint-2013-v2-0/
Daniel, I did do that, I copied and paste into content editor — but nothing — what am I doing wrong?
Hmmm, hard to tell. Try pasting all the code into a Script Editor Web Part and if that fails as well, have a look into the console output (F12) to see if there are any errors thrown.
put the code in text file and put it globalcode document library. and reference it content editor it will work.
Just leaving a reply to say THANK YOU ;-) Great post, was really helpful and actually the only one I’ve found which is working with SP 2013. Especially because no customizations in the code itself is needed. Thumbs up!
Works great! Thanks.
How can I use it with the edit mode?
Great post! It works and it looks good! Thank you for this great trick :)
I finally got this working after a couple hours of frustration (not a programmer and new to Sharepoint 2013). For those who are new and haven’t been able to figure it out on their own here is what I did to get this working:
1. Click on “Site Content” on left side of home page, then click on “Site Assets”
2. upload “StickHeaders_v2.5.js”
3. Click “Home”, then click on “Page” tab, then select “View All Pages”
4. Click “new Wiki page” and name it
5. Click “Insert” -> “Web Part”
6. Click “Media and Content” then select “Script Editor” and click “Add”
7. Click “Edit Script Editor Web Part” then click “Edit Snippet”
8. Insert this text:
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>
<script type=”text/javascript” src=”http://path to the script/StickyHeaders_v2.5.js”></script>
9. Click “Insert” -> “Web Part” -> “Apps” -> “Name of your List” then click “Add”
10. Click “Save”
Column headers should remain at top of list at this point.
I had an issue where if I added the page to the quick launch bar the script stopped working because “Minimal Download Strategy” was enabled for my site and wasn’t loading all of the code.
To fix this:
1. click on gear icon in upper right next to user name, then click “site settings”.
2. under “Site Actions” click on “Manage site features”
3. Click on “Deactivate” next to “Minimal Download Strategy”
Links to the page should load properly now.
Thanks Daniel for making my large list on Sharepoint easier to use/edit!
the first step 8 is where you paste in the code that Daniel provided (it was stripped from my original post)
Hi Luke,
thanks for the explanation! I’m sure this will help some others.
I’ve taken the liberty to edit your first comment and put the code into step 8.
Thanks again!
Hi: I saw a reply about O365 so I just want to say it works in O365. I put the src=google into the master page. .js into the Site Assets and the reference to .js into the "link to" dialogue box at the top of the CEWP. I was a bit confused as I first tried a list as opposed to a doc lib and I couldn't get the .js to work with the list. I think I'll go back and dig in to see if I can get this to work with lists. Maybe it does and I just don't know how to configure it? Anyway Fantastic! Where's the PayPal coffee tin? Best regards, ~B
Hi Barry,
no configuration is necessary, it should work right away. Do you still have this issue?
Hi
I noticed a post re O365 so I wanted to say it definetly works on O365. But I had to configure it exactly as I said to get it working. I suspect this is an O365 quirk as opposed to a general configuration requirement. I was only successful with doc lib not with a list. I wanted to explore this but haven't had a chance to get to it.
I noted someone else recently saying they could not get it to work on O365 but if they set it up as I described it will.
Nice work!
~B
Dude gr8 post, helped me a lot for large custom list.
Hello Daniel,
Thanks for the amazing script. Unfortunately I'm running into a slight issue with it (I thought this licked my "sticky headers" issue for good). I had someone test the page after I put your script onto it and noticed the Ribbon at the top becomes no longer visible ( http://i.imgur.com/v9kI3eL.png These highlighted ones stop appearing )
I hate to be a bother and ask for some assistance, but I've yet to find a sticky header solution anywhere else
Thanks again!
Hi Joseph,
I think what you are talking about is by design. As soon as you have more than the original web part on a list view page the item- and list-tab will disappear. In order to see it you have to click into the list first otherwise SharePoint does not know which lists/items properties you want to see/edit.
I don't have any proper workaround for this, yet.
AFAIK, the only way to circumvent this is to reference the script in the masterpage, thus avoiding having more then one web part on the page.
Hi Joseph,
I could find a workaround for this issue. Please try Version 2.7!
Please keep in mind that this is not a bug but rather expected behavior when there is more than 1 web part on a page. I hope the workaround introduces no other issues.
Thanks Daniel!
I greatly appreciate your help and support on this.
It's actually a bit calming to know that it's an expected behavior, but at the same time frustrating. Your code is still quite the life saver!!
I have office 365 SharePoint online. I'm a newbie here. I was able to download the latest JS file and then put it in my styles library. Then I referenced it with a line like this in a CWP on the list edit page section.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/sites/dev/Style%20Library/Assets/StickyHeaders_v2.6.js" type="text/javascript"></script>
Well didn't work for me. Any specific step-by-step guidance someone can provide? Thanks! :-)
Hi Alex,
it sounds like you did everything right. Can you see any errors in the console of your browser?
Hi David,
So on the site collection settings (gear on the top right) then 'Manage site features' and disable MDS ( Minimal Download Strategy ) and it worked!:-). I am using SharePoint Online 2013 for this
I followed Alex work-around and it worked fine, I'm wondering why this is necessary… any idea?
Great Script! By far the best. One little thing I noticed.
If you have a choice column -> choose an item to filter on -> and then scroll down,
the sticky headers show up but the filter dropdown pops up again and you can not close it.
It only happens when not in quick edit mode.
Hi DS,
thanks for mentioning this! A fast fix for v2.7 of the script is to put 'stickies[i].find(".ms-core-menu-box").remove()' after line 186.
Daniel,
Yes, that looks like it took care of it. Thanks for the help!
Nice script, I have just one issue, Clicking on Select All Column is not selecting when ever we are scrolling.
Hi Sandesh,
this issue is fixed now as well. Please download v2.8 to test it. The select-all-button is quite unreliable in my SharePoint environment but at least all items are selected now when you click the icon most of the times.
Please give it a try, I hope it works for you.
Daniel
This is an excellent solution! Works for our SharePoint Foundation 2013.
Many thanks!
Thank you for this script, but we are finding a strange behavior where a cells / whole screen is jumping to the right side whenever we are trying to edit the text in the quick edit mode in SharePoint 2013, please let us know if you have any questions.
Steps to reproduce issue :
After applying StickyHeaders_v2.8.js file
Step 1. Edit list under quick edit mode, Add large text in the cell.
Step 2. Try to edit the data inside the cell.
Step 3. Whole screen / cell is shifting to the right or jumping cells. Not in focus so that particular cell can be edited properly.
thanks.
Hi Rahul,
haven't had this issue so far and i'm unable to reproduce it. Can you upload a screenshot somewhere, I would like to see how exactly this issue looks like?
Daniel
I am having this very same issue here at the USDA. (By the way, LOVE stickyheaders.) In Quick Edit mode, if you click on any cell, the whole screen and cursor jumps to the right of the list. You can still edit the cell, but the user loses any sense of where he is in the list, so it's hard to make edits in Quick Edit mode. Has this issue been resolved? I believe I'm using the current version of the stickyheaders code.
I can't show you the SharePoint site because it's behind USDA's firewall. (The feds are pretty picky about such things.)
Hi Keith, I'll have another look at it. Do you mind telling me which browser the USDA is using? (:
Maybe that helps me to narrow it down.
And thank you very much for the instructions. Can I hotlink to it up in the product description? I will credit you of course.
This is really great stuff, thanks for your work!
Awesome script – was exactly what we were looking for. The only problem for us is we are unable to get it to work in firefox and chrome. Works just fine in Explorer but we have mac users and most of us don't use Explorer. I am sure we are just missing something simple but figured I'd ask if you have any ideas. We are using Sharepoint Online with Office365.
Thanks
Bruce
Hi Bruce,
are there any error messages in the console? I'm not sure whether the Minimal Download Strategy Feature could cause this, is it activated on your site?
Daniel
I'm both new to Sharepoint 2013 and not much of a programmer so I followed Luke's instructions above but it didn't work for me. Question: should I be editing the path in <script type=”text/javascript” src=”http://path to the script/StickyHeaders_v2.5.js”></script> to point to the directory on the sharepoint site where StickyHeaders_v2.5.js exists (which is what I did)? – I actually have v2.8 so I changed that reference in the code as well. We're running on Foundation but I saw in the comments that someone else is as well and they got this to work. Suggestions?
Hi Dan,
seems like you did everything right. Any error messages in the console that could help me to troubleshoot?
Daniel
Could not get it to work. Erroring on this.length.closest(".sticky"). This is undefined.
Hi v,
i'd like to help, the only problem I see is that my script does not contain a line like 'this.length.closest(".sticky")'.
Could you please be a bit more specific about the error message?
Daniel
Daniel,
Do the column header filters work too?
Thanks
V
Yes they do indeed (partly). I couldn't figure out yet how to get them to work in QuickEdit mode, but in the normal mode they are working fine.
Hi Daniel, Did u fixed filter and sort issue in Quick Edit mode.
Tried it. Cannot get it to work. Here is the point where it is failing.
document.getElementById($('.ms-listviewtable').closest("div[id^=MSOZoneCell_WebPartWPQ]").attr("id"));
I replaced closest with parent().parent() and that resolved it….but still had other issues. Am I missing something here?
Hi V,
again, there is no such line in the latest version of the script (v2.8 as of now). I would like to help you, but it seems like this line of code either belongs to one of the older versions of the script or to code that is not related to the stickyHeaders script.
Which version of the script are you using?
Daniel
Dan,
I am using the v2.8 version. The line mentioned in my above post exists in this version.
if(wpcomp){
var zc = document.getElementById($('.ms-listviewtable').closest("div[id^=MSOZoneCell_WebPartWPQ]").attr("id"));
wpcomp.selectWebPart(zc, true);
}
Is it not the right version?
Hi v,
My mistake, of course it is. I'm testing v2.9 right now and apparently I removed that line there, sorry for the confusion!
I have no idea why this line would cause any problems, though. Would you tell me how exactly it fails? Are there any details in the console?
What other issues do you have?
Hi Daniel,
I'm just wondering whether this script will work on Sharepoint 365 as well.
– Alvin
Hi Alvin,
yes, it will work.
Daniel,
First, awesome job working on something that's so helpful!
Now onto my problem… It actually seems to be the same as Dan's. I followed Luke's steps and updated the path to the javascript but it still is not functional. I tried in Chrome, FireFox, and IE and used IE's debugging tools but came up with no issues.
Environment:
Windows Server 2012 servers
SharePoint 2013
What troubleshooting steps specifically (if any) would you like me to try that may help you?
Thanks,
Tim
sick dude ! this works GREAT on 2013 (i tried about 4 scripts to freeze headers & this…is…amazing). bravo !
Hi Daniel,
Super, super useful! Unfortunately I'm running into the same bug as Harry did — if I click a column name to sort or filter, I see this http://www.directupload.net/file/d/3566/oo76vosh_png.htm instead of sort/filter options.
Running 2.8 in SharePoint 2013 (online) in Chrome. Any ideas?
Just following up — this is actually a result of some problems with our internal branding. When I deployed to a new vanilla site, it worked just great. Thanks again for a wonderful script!
Hi,
I am new to SharePoint. I tried all the steps Luke gave above and even deactivated the "Minimal Download Strategy". I still cannot have this working. Anything that I can try in specific to make it working. I am using on SharePoint Foundation 2013.
1. Click on “Site Content” on left side of home page, then click on “Site Assets”
2. upload “StickHeaders_v2.5.js”
3. Click “Home”, then click on “Page” tab, then select “View All Pages”
4. Click “new Wiki page” and name it
5. Click “Insert” -> “Web Part”
6. Click “Media and Content” then select “Script Editor” and click “Add”
7. Click “Edit Script Editor Web Part” then click “Edit Snippet”
8. Insert this text:
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>
<script type=”text/javascript” src=”http://path to the script/StickyHeaders_v2.8.js”></script>
9. Click “Insert” -> “Web Part” -> “Apps” -> “Name of your List” then click “Add”
10. Click “Save”
Any ideas how to resolve this error?
Refused to execute script from 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js%E2%80%9D' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
Hi Justin,
Better use a local copy of jQuery stored in an Asset Library or somewhere else.
Thank you! Works great!
My SharePoint environment has jQuery 1.9.1 being used in the master page. Unfortunately, I cannot change this. Does this script work with jQuery 1.9.1?
Thanks,
Hi Brad,
yep, it will work!
Daniel
Hi Daniel, great post and great solution. Thank you.
Will this work in 2010, or only in SP2013?
Thanks!
Hi Daniel,
Is there any way you will publish step by step guild to those who are not familiar with coding?
I don't know where to enter the code (in the script web part)?
what configuration is needed?
what do you mean by "BBetter use a local copy of jQuery stored in an Asset Library or somewhere else."?
Thanks you!
Ofir.
I want this on all of my site's lists, so I added this to the <head> section of the oslo.master page:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//hostname.contoso.com/SiteAssets/StickyHeaders.js"></script>
However, it still doesn't work. Did I miss a step?
Solved my own problem — had to turn off the Minimal Download Strategy feature.
Hi,
I have added the same in my site page but still its not working for me . Please help its very urgent.
Hi Daniel,
It works great in my SharePoint 365 environment. Thanks so much!!!
Paul K.
Wonderful! You cannot imagine how expected was that feature! Thanks Thanks Thanks!
This is a great piece of work, thanks much!
I am having issues with this script on IE8. It freezes up the browser and then after a while a can start to slowly move down the list but the headers scroll right past. It works great for me on IE9 and above, and on Chrome and FireFox.
Any suggestions?
When I said they scroll right past might be confusing… This original list headers look normal and scroll past like normal. No new sticky headers appear at all when on IE8.
IE Dev tools gives me an error in this function here when on IE8:
function setOffset(){
var parent = headers[i].closest("div[id^=WebPartWPQ]");
//special case (e.g. permission list)
if(parent.length === 0){
parent = headers[i].closest("#DeltaPlaceHolderMain");
}
stickies[i].offset({
left: Math.round(parent.offset().left)
});
ERROR: Unable to get property 'left' of undefined or null reference
}
Update: I had a co-worker with IE8 bring up my list and the sticky headers worked, just caused the page to render really slow and when she tried to scroll down the list it was really freezing up. Seems to just be causing a performance issue on IE8, but it does show the sticky headers just fine.
Just to make sure, I took the script off the list and the performance issue was gone and everything rendered and was able to scroll quickly again.
It's very powerful, great job! It was a basic missing feature from SP.
Can i use this script in masterpage or only CEWP in list/library views?
Many thanks!
Do not answer, i have found it and working fine :)
Thanks!
Thanks Daniel for the awesome script.
Thanks Luke for the walktrough, you save my day T_T.
Hello,
Thank you for a great script. I was surprised when i found out that Sharepoint doesn`t allow this out of the box.
I have attempted to implement it but i`m recieving some errors in the log. How should i attack this problem? When the page loads the users cant scroll. If they click on "Page" the scroll is working again. So basically everytime the page loads it wont allow me to load, but if click "page" then it works.
if( jQuery.inArray( "spgantt.js", g_spPreFetchKeys ) > -1){
g_spPreFetchKeys er udefinert
SP.SOD.executeOrDelayUntilScriptLoaded(function () {
setTimeout(function(){
findListsOnPage();
}, 400);
}, "spgantt.js");
} else {
Great script Daniel! You made a lot of people very happy.
Like Luke, I haven't had a lot of experience adding code SharePoint. I'm also working on SharePoint 2013 Foundation that is not published to the web, and got it working with a couple of small changes.
For some reason in my environment I had to add language="javascript" and type="text/javascript" before src in both script tags.
I found this out when I couldn't get a simple jquery pop up to work unless I was in edit mode.
After getting this awesome script working, I ended up deploying it as a site feature, so I could activate and deactivate on any subsite. I used the link below as a guide (pay attention to the comments for SharePoint 2013).
http://blogs.msdn.com/b/kaevans/archive/2011/04/06/adding-jquery-to-every-page-in-sharepoint-with-delegate-controls.aspx
I am having a strange issue with your script. I am using the 2.8 version. The sticky headers only seem to show up if you edit the page that the script is on. If you view the page, the sticky headers don't show up. Have you seen this behavior? Can you help? Thanks
Daniel: +1000 to you. Excellent script. Added it in-line to a custom O365 master page that already has jQuery included and it worked right out of the box.
Cheers,
Jim
Nice job. Disappearing headers have bugged me for years. No longer!
Hi,
really like your script! It is very useful. I found one issue though. The sticky header does not work on list view that contains group by.
Cheers
Felicia
Hi Felicia,
the new v2.9Beta works with grouped list views. Please give it a try!
Daniel
Daniel, this is a great tool. Thanks so much for creating it and supporting it.
My experience with a list with a Group By is that sticky headers don't show up when you first scroll down the list. You have to collapse then expand a group for the sticky headers to come up, and then the sticky header column titles don't match up to the list column titles. If there is something I might be doing wrong, let me know.
First off…great work!
Got it working in a web part page on my site quick and easy. However, only issue I have found is it appears to possibly conflict with other scripts in my master page which I cannot edit.
Basically we have a custom menu bar at top of all pages on the site. This menu bar also uses JQ to generate some pop-up menu items whenhovering over the menu item. Whenever I open the custom page with the sticky headers script embedded the pop-up menus no longer work.
Any ideas? Thanks!
Hi Sean,
can you provide me the other script or tell me at least whether there are any errors shown in the console?
If you want to send the script to me for troubleshooting then please use the contact form.
Daniel
Great job but I have an issue, it's not working for all users! I've put the script at the end of the master page, and it's work great for all the programmers, but no normal users are seeing the sticky bar. do you have an idea why?
Daniel,
I got your newest beta working with Script Editor on SP2013+October2014CU running fine on an intranet site for testing. However when I implement the same code to our test WWW site (SP2013+December2014), which has Anonymous Access enabled, nothing happens. I've included the code I'm using as well as Chrome and IE console. Any ideas?
Code: <script src="/SiteAssets/jquery.min.js"></script>
<script type="text/javascript" src="/SiteAssets/StickyHeaders_v2.9Beta.js"></script>
Chrome console: Uncaught TypeError: $(…).closest is not a function
This happens on Line 194 aka: $("tr:has(>th[class^='ms-vh']):not(.sticky):visible, .ms-listviewgrid").closest("table").each(function(){
IE console: Object doesn't support property or method 'closest'
This happens on: Same as Chrome
Hi Tim,
.closest() was introduced with jQuery 1.3. The error you get sounds like you are using an earlier version of jQuery on your internet site. Can you check that?
Daniel
Appreciate the response, Daniel. I went ahead and tested using the newest 1.x version (1.11.3) and unfortunately the js still doesn't work and is failing at the same line. I'm not sure what might be missing.
Update to my earlier comment:
It looks like somehow jQuery 1.2.6 was still getting called? I'm not sure why. In the console I saw the main page, StickyHeaders.js, and jquery-1.2.6.js
So what I did was completely removed the Script Editor web part I was using, then inserted a new one using the new jQuery and now it is working on all browsers!
Hi Patrick,
that sounds like you haven't published the modified version of the masterpage, yet.
You can publish the masterpage here: http://site/_catalogs/masterpage/
Daniel
You were absolutely right! Works like a charm now.
Hi Alex.
This jquery looks quite useful. A question I have is… have you thought of getting the code to lock vertical scrolling as well with a specification of one or two columns? I have a need for something like that as well as the headers remaining on page.
Daniel,
Thank you for this great script. I am having an issue with a very wide list where the sticky headers are not matching up with the columns when you scroll right. Is there a modification I can use to correct this?
It was an issue with a column auto re-sizing not the script. Thank you!!
For those who find this when searching for a SP2010 solution: This does not work.
Thank you Daniel, for this wonderful script with simple steps. It works great, with a small issue though.
I have a huge list with more than 100 groups in a view. The groups are collapsed by default. The sticky header appears when I start scrolling down past a few groups. When I start expanding/collapsing groups, the width of columns keep changing depending on the content. However, the columns in the sticky header doesn't automatically align to their respective columns. The width of columns in the sticky header remains unchanged once it appears. This issue is not there in list views with expanded groups where the column width doesn't change.
Let me know if you need any screenshots to help understand the issue better.
Thanks!
This works fine for me in SharePoint Online 2013 on the default view style which is a fixed size, but is there a way to get it to automatically resize to fit the browser window when the view style is changed to Shaded (which is more responsive)?
Hi Daniel,
I'm getting a scripting error indicating "Uncaught TypeError: Cannot read property 'top' of undefined" which I believe is related to line 100 in v2.9beta. Chrome works through it but IE11 does not. Do you have advice for getting this to work in IE11?
Momba
Daniel — when I run this it breaks my page (blank). When I open Dev Tools in IE — i get an error saying "Object doesn't support property or method 'dotdotdot'" Any ideas?
(Line 727 & Line 501 & Line 271)
Hi Daniel,
love your work so far, however I have problems in IE11 on SP2013 with the latest version (StickyHeaders_v2.9BETA.js).
The browser hangs for a long time and eating a lot RAM when the page is loaded.
It do look like it is this part that make the problem:
$("tr:has(>th[class^='ms-vh']):not(.sticky):visible, .ms-listviewgrid").closest("table").each(function(){
in the function: findListsOnPage(hashchange)
$("tr:has(>th[class^='ms-vh']):not(.sticky):visible, .ms-listviewgrid").closest("table").each(function(){
if($(this).find("tbody > tr").length > 1){
listContainer.lists.push(new List());
listContainer.lists[listContainer.lists.length – 1].list = $(this);
if($(this).hasClass('.ms-listviewgrid')){
quickEdit = true;
}
}
})
During my debugging I hit 1,3 GB of RAM usage in IE.
However I have no problem in Google Chrome or in Firefox.
Cheers,
Kenneth Soerensen
Hi Daniel,
Further to my previous comment.
I have narrowed the reason for long execution time to two specific part of the following code string: $("tr:has(>th[class^='ms-vh']):not(.sticky):visible, .ms-listviewgrid").closest("table").each(function(){
In my testing “:visible” had an execution time of about 30 seconds, and “.ms-listviewgrid” had an execution time of about 15 seconds (over 10 000 items checked in the query).
However, I only found this issue with IE, and from what I understand it is a known issue with IE.
I hope this feedback is useful.
Cheers,
Kenneth
So I'm getting the same serious lag time. Have you figured out a way to minimize this?
woow its really helped me thank you daniel
Hi,
I am a newbie and just started using sharepoint 2013. I wanted to implement this for my custom lists.
I copied the JS in my home page: style library -> XSL style sheet but my library doens't seem to take it. Do I need to do something else at my list ? or include the refernce anywhere.
Is there any step which I am missing.
Thanks!!
I had the same problem and applied the above suggestion : on the site collection settings (gear on the top right) then 'Manage site features' and disable MDS ( Minimal Download Strategy ).
It worked for me
Great.. got it. Is there a way to freeze first column as well?
I got this working in O365 after deactivating Minimal Download Strategy. The only issue I have come across is that now any page with this script freezes for about 5 seconds when first loaded. Once loaded the function works flawlessly. Any suggestions for eliminating or reducing the freeze?
I meant to say 15 seconds. Seems like a long time to wait before the page can be used.
Hi,
I've implemented StickyHeaders a few months ago and it's all working fine except one thing. I have a list in SharePoint where the user has to scale the browser view to 80% caused by the width. However, StickyHeader's position is not correct after scaling. The first column is a MS-vh (People Field) and after that column, the header starts to early and is off-center. There are 31 columns after the first. The offset is getting better the closer the last cell comes. Any ideas on that?
Another question: Is it possible to integrate the first item in StickyHeader?
Hi Daniel,
I am facing issue with IE8. IE8 browser is getting hanged when I am using this script.Could you please help me with this.
Hey there
The Sticky Header doesn't adapt to a wider Screen. It works fine till some point, and then it stops adapting the horizontal size…
Any suggestions!?
On IE, I find it runs very slowly and get the error that it is taking a long time to execute a script. I don't have the issue on Chrome, Edge, or FireFox. Do you know why that is? The corporate decision is for people to use IE. It just freezes the screen for a few (3-10) seconds until the script completes.
Seeing the same thing here. Long freeze when loading in IE11
I am getting a strange error in IE10 using SP2013:
"Unable to get property 'closest' of undefined or null reference
File: StickyHeaders_v2.9BETA.js, Line: 195, Column: 3"
Here's what I've embedded on my page in a webapp:
<script src="/SiteAssets/jquery-1.11.3.min.js"></script>
<script src="/SiteAssets/StickyHeaders_v2.9BETA.js"></script>
Any help is much appreciated!
This is super awesome, thank you for sharing!
Thank you so much for this code, my company has been searching for a solution to this for a long time. Any way to apply this to users' personal views? From what we can tell we would apply separately to each public view in the list. Is that correct?
Hi,
could someone please tell a complete newbie how to insert the code to a sharepoint list?
My default view is in quick edit mode.
So far I've tried: adding as Content Editor or as Script editor with by selecting "List" from the Ribbon and then "Form Web Parts", "Default Display Form", also "Default Edit Form".
It doesn't appear.
I've also tried being on the list and editing the page itself from the general settings menu, "Edit page", add Web Part, Content Editor or Script editor. In this case, the code just appears as text above the list. :(
Many thanks for any input you might have for me!
I actually recently wrote a guide for my colleagues for adding this to site pages (although you can do it directly on a list page as well), so hopefully this will help you:
Download the files jquery-2.2.1.min and stickyHeaders_3.0.
Add these two files to the Site Assets library of your SharePoint site.
Create your site page, inserting the SharePoint list. Under the SharePoint list, insert the webpart Media and Content > Script Editor.
Edit this webpart and click on EDIT SNIPPET
Add these two lines of text (making sure you change the mysite text to your own site name):
<script language="javascript" src="/sites/mysite/SiteAssets/jquery-2.2.1.min.js"></script>
<script language="javascript" src="/sites/mysite/SiteAssets/stickyHeaders_3.0.js"></script>
Stop Editing/Save and you’re done!
Great job! Do the drop-downs located in the ribbon (i.e.'New Item', 'Alert Me', 'Modify View') appear to be positioned correctly when they are clicked once the page has been scrolled horizontally and/or vertically?
Hi Frank, I'm not sure that my understanding is correct. The ribbon shouldn't actually be affected at all, neither by scrolling nor by my script.
Hey mate, sandra_nz from Reddit here, loving this product. Are the column filters supposed to still offer multiple selections for filtering, like Sharepoint Online does? And if not, could it be a future enhancement?
Cheers!
sandra_nz
Hi Sandra, the script shouldn't affect how how filtering works. Do you experience any unexpected behavior?
I ended up removing the script on the page, then putting it back, and the filtering is working properly now, allowing multiple selections. Must have just been a "glitch in the matrix"!
Hi,
Great Job! This is exactly what I need. I run the script on my page and it is working but I faced with a problem,
Since the site that I am working on is an eastern site so the list direction is right to left but when I scroll down your sticky header is left to right.
can you guide me to what to do with codes or where to add css in this case?
Regards
Shadi
one more question: is there same programming to not only freeze the header but the first column?
Regards
Shadi
Great job, thanks
I can't get the "Download Now" button to work. It just jumps down the page. I tried 6 different browsers with the same result. Am I doing something wrong?
Problem solved. I didn't see that stickyHeaders_3.0.js was the link to download.
Hi Rick, I meant to reply but I forgot about it. Sorry for that! Glad you figured it out, though, and thanks for letting me know that it is not as obvious as I thought it is! I will do some changes to the download button.
Hi Daniel,
This is an awesome enhancement!
Is it possible to apply this to a list using the JS Link field within the list's web part rather than adding something like a CEWP?
Thanks,
Ken
FYI, found my own answer. Yes, it's possible – just reference both jQuery and StickyHeaders (in that order) with a pipe in the middle! Like:
~site/SiteAssets/Scripts/jquery-1.11.3.min.js|~site/SiteAssets/Scripts/StickyHeaders.js
Now no CEWP or adjustments needed to the lists!
Hi Ken,
thanks for posting your solution back here!
Hi Daniel, me again!
Wanted to let everyone know something else too – learning as I go.
Turns out there is one reason to use a CEWP instead of the JS Link field.
The JS Link field disables all special views other than the default view. This means views like Shaded and Newsletter-No Lines won't shade properly.
As well, Task lists lose their special views/properties that come with task lists – like the easy check mark box to mark the task complete.
:-(
Don't suppose you know a JS Link solution for all of that? I can live with it, but still a bummer.
Thanks,
Ken
Hi Ken, I'm not aware of any way to circumvent this limitation.
You can, of course, pipe another script that takes care of the shading, there should be a few scripts out there somewhere.
unable to download StickyHeaders.js, The download button is jumping..
Kindly help ..i think this will make my solution.
The button on top brings you directly to the download area. There, all you have to do is to click on the filename to download the script.
Hi daniel, this is not working for me and there is an error in console, Uncaught ReferenceError: g_Workspace is not defined, can u help me ?
Hi Reza, which version of SharePoint are you running?
sharepoint 2013, i put stickheader and jquery js on my masterpage
That's odd.
Try replacing line line 32 of v3.0.1 with this one here:
jQuery("#s4-workspace").on("scroll.stickyeaders", {elem:list}, function (event) {
i think every line contain g_Workspace is error, after i replace line 32 i got another error in console Uncaught ReferenceError: g_Workspace is not defined but in line 94
Oh, ya right, then replace all jQuery("#" + g_Workspace) with jQuery("#s4-workspace").
Line 32, 57 and 94.
Thanks daniel, it's worked, this script really helpful.
daniel but when i use quick edit, it's not working and in console no error, u know why ?
oh nevermind it's worked haha
Hi Daniel,
I didn't notice this before as I just changed some pages to use the Newsletter, No Lines view (issue also in Newsletter view). Shaded view does not have this issue (works fine).
Setup: SP 2015 Foundation, Newsletter No-Lines view, version 3.0.1 (occurs also with 3.0)
jQuery 1.11.3.min.js hosted locally, also have your ListAttachments 2.4 within the CEWP after it (ID column visible, stock colors)
When the StickyHeaders are visible and I move my cursor over various headings, I get POST 500 internal server errors with reference to the sites /_vti_bin/lists.asmx and jquery-1.11.3.min.js:5
If I change to other style views this goes away.
Help! Any thoughts?
Thanks,
Ken
Sorry – SP 2013 Foundation.
Hi Ken, I'm unable to reproduce the problem. Would you please try to find out the POST data for the failed requests?
Hi. Below is first the "Synchronous" warning, then the POST error.
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
jquery-1.11.3.min.js:5
POST http://home.xxxx.com/pm/nds/_vti_bin/lists.asmx 500 (Internal Server Error)
send @ jquery-1.11.3.min.js:5
m.extend.ajax @ jquery-1.11.3.min.js:5
spjs_wrapSoapRequest @ ListAttachments.js:382
spjs_GetAttachmentCollection @ ListAttachments.js:356
getAllAttachments @ ListAttachments.js:304
showAtt @ ListAttachments.js:242
(anonymous function) @ ListAttachments.js:221
m.event.dispatch @ jquery-1.11.3.min.js:4
r.handle @ jquery-1.11.3.min.js:4
More news!
As mentioned this is in a list with Newsletter-No Line style. Even before I scrolled to have the StickyHeaders active, my mouse went over the "presence" box of the Assigned To heading – that is the thing that is causing the error – in both the normal header and the StickyHeader.
And appears to be jQuery related (pretty sure), not related to any of your products (way to go, Daniel – awesome!)
AND appears to be only an issue with Chrome!! Firefox and IE11 just get the deprecated warning (typical) and that's it!!
Because our company uses IE11 as default, and we do use MS Lync, this isn't a concern I'm going to worry about.
And what's that saying – it hurts when I do this….then don't do that! Same thing here! :)
Thanks again,
Ken
I'll release a new version of ListAttachments.js soon. Maybe that will eradicate this issue.
Hello and thanks for this great tool.
It works indeed with grouped list but only for the first group level. Would it be possible to have it work on multi level grouped list?
ex:
group1
sub group a
sub group b
group2
sub group a
sub group b
at the moment, the headers disappears when the scroll is at sub group level. If possible, what code line would need to be edited?
Hi Romain, this issue should be fixed now. Please grab v3.1.0 and give it a try.
Can you link me to the information on how to add this to the master page. I normally dont mess with the scripts. I really need to make this work but have not been having much luck. Thank everyone for any and all help.
So far I have tried putting the Jquery and the script in the assets folder and linking to them in a script web part but havent had any luck.
I figured it out …Im an idiot.
I seem to have an issue. Our Sharepoint environment seems to run in 'Strict' mode.
2 errors according to the debugger:
– SHListContainer
Variable undefined in strict mode
– return ULSSendExceptionImpl(b,c,a,ULSOnError.caller)
Accessing the 'caller' property of a function or arguments object is not allowed in strict mode
Is this something I can fix on my end ?
I can't change the 'doctype' of the generated html.
Fixed it: added a few 'var' statements before some variable definitions, and got it working.
Hi Theo, next version will be Strict-mode proof!
First off, I love your script. It has helped us out immensely. I have a an issue though. Users are able to see the headers freeze on the All Items view of my list but can't see it in the Data Sheet view. I am using the jlink method not the cewp method. Do you have any idea of what could be causing this?
Hi Bradley, When using the JSLink method you will have to modify the JSlink property of all views that are supposed to have sticky headers.
Daniel,
I am trying to get your solution to work in my environment. I am running SharePoint 2013 server CU May 2016. I am incorporating your solution into my stapling feature and deploying it out to all my site collections. My master page has a fixed width so I am thinking that's where the problem lies? I do have other jquery commands running but I decided to isolate those out and I still cannot get the script to run. I have tried using Script Editor and the master page methods, none of which has worked. Again, is it because the jquery code is not taking into consideration a fixed width masterpage?
Hi Alex, I see no reason why it shouldn't work an a site with fixed width, even though I haven't tested it myself. Please check the browser's console for any errors and you could also check the contents of the global variable 'SHListContainer' and send me a screenshot of it. Maybe I can see what's going on there.
Hi Daniel,
I've implemented Sticky Headers on a page via Script Editor, and it seems to be working for me in the Edit mode and standard list view. However, it is not working for any other site users (contribute permissions) while in Edit mode. Works for them OK in standard list view. Any thoughts? Do I need to create custom permissions for the contribute users for the js files or directories where they are contained?
Is the Edit mode you are talking about the Quick Edit mode or a Datasheet view? If it's the Quick Edit mode then it should work without any further action. If it's a Datasheet view then you will to add the script onto the page of this particular view.
HI Daniel,
I am experiencing the same issue. Users with contribute permissions are unable to see the stickyheaders in Datasheet view. Users with Designer permissions on the list can see the sticky headers.
Also, is there any chance of freezing designated columns for horizontal scrolling?
Thanks,
Thinh
I just wanted to say thank you for this great code. it provides functionality that should have been included in SharePoint in the first place. Great job! It's working perfectly for me, and it was very easy to implement. The only anomaly I could see is that my column content is no longer centered. Something in the code seems to be overriding the style declaration I've been using to center column content. Not a big deal.
Now if someone would write some code that could freeze columns as well, then SharePoint lists would actually be useful!
Glad that you like it. How do you center your column content? The script should actually not affect the styling of the underlying table.
Hi Daniel,
Thank you for the latest version with fixes.
The only issue I see for now is that the sticky header disappears when I switch between views containing groups. For instance, View-1 has collapsed groups by default. I expanded a few groups in that view and the sticky header worked fine. When I went to View-2 and came back to View-1, the expanded groups were intact. But the sticky header did not appear. It appeared only after collapsing or expanding a random group, even though there were some expanded groups already.
If possible, please take a look into it and fix it in a future version.
Thanks!
Can I assume that Minimal Download Strategy is activated on your site?
Hello, I'm fairly new to SharePoint can someone walk me through the steps to add this on to my list. I've tried following some of the steps in comments, and change the version that's on the script to 3.1.1, but nothing happens
Nevermind I just had to give it a few seconds, thank you.
you've done an awesome job
Hi Daniel
Thank you for providing this code – exactly what I was looking for.
Not a huge problem but thought I'd raise it. My list is quite wide and is grouped – in IE9 the headers don't match up to the column (particularly towards the right of the list. In Firefox it seems to work perfectly.
Thanks again!
This is wonderful! I've been looking to do this for a long time – I see you've put a lot of work into it. One glitchy thing that I can't figure out. SharePoint 2013 On Premise, standard masterpage – I've added the code onto a list view page, with a reference to JQuery.
On my machine, it works perfectly – standard view mode the headers pop up when headers scroll off the page, and in quick edit mode they do as well. For another user they do not – they work on standard view mode but not the quick edit mode.
Did an edit page in both modes just to make sure the webpart was still there, and it really is Quick Edit though it is an old list created in 2010. I see in comments above people had same problem but don't see anything that helps.
This view doesn't have groups. It's a wide view where you have to scroll right. No MDS.
StickyHeader 3.1.1
I did find one thing that looked incorrect – I changed the stickyeaders reference below to stickyHeaders but that didn't fix the issue. Doesn't really explain why mine worked and hers didn't.
Browser version IE11 is the same. Any thoughts? It's hard to tell what's going on since it seems to be computer dependent.
jQuery("#s4-workspace").on("scroll.stickyeaders", {elem:list}, function (event) {
event.data.elem.update();
});
FYI, I have created a short instruction page that explains in detail how to implement sticky headers. You'll find it at http://ksessions.com/persistent_column_headings.pdf.
Keith, do your instructions work with Sharepoint Online? I followed them exactly and nothing happened. I added the CEWP to a Calendar library and put it on a page with the All Events list view.
Ok, regarding my earlier problem when using Quick Edit mode: The problem is not with stickyheaders; it's with the css file I'm calling.
Again, great work on this code. I can't send you any government (USDA) money, but I can and will make a private donation for your effort.
this is exactly what I'm looking for.
I have uploaded the 2 files and tried to include the scripts in the script editor of the content editor web part. after clicking on stop edit the list disappears. I'm using a SP2013 list to try and apply the sticky header
This is an amazing little piece of code. Makes my site so much more easier to use. I am also looking for some javascript to make my summary links scroll to anchor links within the wiki page. Do you have some idea about how to implement that ? Would be so very grateful!
Hello, it doesn´t work for me:( I added the script into script editor and all list was hidden. Why?
The script works well except for list views with a fixed width and then it does not work at all. Any suggestions?
Hi Chuck,
there are a lot of positioning issues with the StickyHeaders when the list is scrolled vertically, that's why the script isn't running on lists with a fixed width. In the first 3 lines of the update-method is a fixed-width-check. You can remove the return-statement in it and try your luck.
Version 3.1.1 has a typo in line 31?
jQuery("#s4-workspace").on("scroll.stickyeaders", {elem:list}, function (event) {
should be:
jQuery("#s4-workspace").on("scroll.stickyHeaders", {elem:list}, function (event) {
Indeed, thanks for the discovery! It will be corrected in the next release.
There is a missing semicolon on line 118:
this.setWidth()
Thanks, will add the semicolon in the next release!
How do I add this to my master page so it applies to all lists and views? I am using Sharepoint 2013 online. I can add it to a list via code snippet but it only applies to that view.
Does this script works in Sharepoint 2010 too?
Thanks
Works like a charm! Thank you so much for offering this solution, Daniel…
Hi Daniel .Great Work. Working as expected. I wanted to see the script but when I am trying to open the js file on my desktop its giving me Object Expected error.Can you or someone post the script here. Thank you in advanced.
Hi Zed, you can either change the default application for *.js to Notepad, N++ (or any other text editor for that mattter) or you could simply rename the file to *.txt
Yeah it worked.Thanks once again! I have a question which is a bit related to the headers.I have a list in which the items are long string of characters.Due to this the Column titles are mis-aligned with item rows .Something like this
Column Header—> Title Name CreatedBy Modified By Address
Row —> Title1234 zEDTURNUR MARK SHEPHERD ZEDTURNER ADDRESS1234
I am looking to do this through CSS preferably by Text wrap,increasing space between column or any other method.I have tried many things it just doent work. Is there is some property which is not allowing it to do so.?just curious!
Hi Dan,
Love the script, massive thanks from us!
Having a strange issue though; I'm using this in a Datasheet View with a little bit of CSS for column widths, colours, etc, and every time I make a change in a cell, the headers shoot back to the top of the page, so I have to scroll up and then scroll back down again to bring the headers with me. Once I've done that, the blue-outlined box doesn't show on the same line as the line I'm editing, even though it is editing that line!
Screenshot: https://s10.postimg.org/e6vb7159l/SPissue.png
Thanks for your help!
Hi,
Did this issue of blue outlined box not showing at correct place resolved. I'm also facing the same.
Does this work in the new "Modern library/List view"
No, it will not work there.
Is there any way to make it work in the new/modern view instead of only classic?
This would be an amazing enhancement. I've looked all over and no one has a solution to sticky headers for the new modern views in SP365.
Which method is responsible for aligning the column headers with row items.Actually my text are very long and its getting misaligned with column headers.how the space are being managed to correctly aligned .?
this.setWidth is responsible for that. The script stores the widths of the headers and the fields in the first data-row in two separate arrays. It then iterates over these arrays and applies the widths directly to each column heading and to each field of the first data-row.
Hello,
I am using the StickHeaders JS using List Viewer web part however I also have web parts to the side of the list.
When I am scrolling down the list, the sticky headers are left-aligned and not central with the list.
Any way to align sticky headers?
Hey, great job!
I just have one question. I'm using Sharepoint Online and when I add it to the page using Script editor my custom column widths (they are added to <th> using style="") are overwritten.
Could the issue be related to the error I get when executing the script:
jQuery(window).on("resize.stickyHeaders", {elem:list}, function (event) {
setTimeout(function(){
Error line—->event.data.elem.setWidth();
Error -> Unable to get property 'elem' of undefined or null reference
Any input would be appreciated.
Thanks.
Thanks for very useful script.
I have one issue, when I scroll down, the data gets shrink but not the header. Due to that headers and data are misaligned. Could you please help to find the reason?
Hi.
There is an issue regarding the menu in oslo template. When I scroll down and the sticky header appears then if I hover over the top menu, the sub menu appears behind the sticky header. I think it is an issue with the z-index property. Can you please check this issue?
Hi,
i used the V2.9beta. now i try the actual Version v3.1.1
since V3 is the Background transparent. nice, but not helpful for us.
I tried other Versions 3.0 etc, but all are transparent.
It is possible to set the Background white again, like in V2.9beta?
thx an greetings
i forgot: great Job :-)
Hi Dan,
Thank you and excellent job on this script.
We have implemented this to some of our lists that has lots of data in it via Script Editor web part per list view. I even added the whole js script onto the page of a particular view but it still doesn't work in Datasheet view mode for users with only "Contribute permission" . It works well for standard views only. Is this something that will be fixed in the new version?
Has anyone encountered this as well and how it was fixed? I noticed that in the List permissions in SharePoint, the Manage Lists and Override List Behaviors has to be checked in order for the sticky header to work in the datasheet view mode. We don't want to give Manage List permission which also allows users to delete lists.
Thanks in advance.
Thanks Dan for an excellent script. It is really helpful. I am facing the same issue that Rhee has mentioned regarding the permissions. Is there a way to make it work without the need of Manage List permissions.
Rhee, did you find a solution for the same?
I'm having the exact same issue. SP2013 Foundation on premise. No solution that I've found so far. Will keep looking.
Otherwise a perfect tool – thank you Daniel, if you're still watching this. Really appreciate all your work.
Hi Clint, Rhee, Geetanjali,
This problem has been fixed in the latest release (v3.2.0). Please give it a try!
Hello, and thank you for this great and easy to implement solution.
However, I've run into a curious problem. If I rip the scripts out and install them, they work on the first load of the page. If I close the browser and try to return, the sticky-headers have disappeared. When I go into debug console I get the following:
TypeError: jQuery(…).closest(…).data(…) is undefined
__findListAndAttachHandlers/ExpCollGroup/interval</<
Only occasionally I am getting a 401 Unauthorized accessing the script as well. Which might be the issue. Minimum Download Strategy is disabled, and this seems to be an on-off issue; sometimes it works, sometimes it doesn't. Any advice?
FYI
jquery_3.1.1.min.js
StickyHeaders_3.1.1.js
The string referenced by the error is on line 71:
jQuery(element).closest("[id^=WebPartWPQ]").data("stickyHeaderData").init();
Also, this script is working reliably in IE and Edge browsers. Does not work in Chrome or Firefox with version 3.1.1 — Error above is from Firefox.
Chrome reports it on the same line, with a slightly different error:
Uncaught TypeError: Cannot read property 'init' of undefined at StickyHeaders_3.1.1.js:71
Can confirm that Version 3.1.1 works fine in Chrome – problem must be at your end Sean B.
Hello, thank you very much. I have one problem with it. in my list i am using image like button (like ribbon buttons)
<span unselectable='on' class=' ms-cui-img-16by16 ms-cui-img-cont-float'><img unselectable='on' alt='' src='/_layouts/15/1051/images/formatmap16x16.png?rev=40'style='top: -19px; left: -231px; '></span></span>
Those images overlay over Sticky menu and also over Sticky filter items … Images don't overlay over OOTB filter menu. How can i fix it?
Sorry, solved, changed z-index for sticky header :-)
Hi, great script, just what I am looking for. There is only one feature that complete it for me. I have built a webpage which displays contains 2 columns. The first column has 3 lists, the second has one. The sticky headers seems to only work on one column, but not both. Is it possible to extend the script so it works on both columns?
Thanks
Hi Daniel – What is the licensing for this plugin? Is it MIT license? Thanks.
Yes, it's MIT.
SP Online
I had an issue where I customize my headers for lists and then the sticky header worked fine in display mode. In edit mode (quick edit) the sticky header was somehow being hard coded to a height of 30 so my text ran below the sticky part and that was ugly.
My fix after lot's of debugging to figure out how this code works:
I added the following line at the end of:
this.sticky.height(this.stickyHeight);
to function List(list)
And that now has the sticky header the proper height in quick edit mode (listType = grid)
Thanks
Hello, thanks for the script! It's awesome! Please note that 3.2.0 didn't work for me in SharePoint Online. No errors in Developer console, it just didn't do nothing. Then I downloaded 3.1.1 and it worked.
Well done, good stuff. V3.2.0 working fine in SharePoint Online. Like you said somewhere, best NOT to call jquery from the script editor, but let StickyHeaders do the job for you.
Hello, thanks a lot for this. I have one question, when there is long header in list, where can I set max-weight to not move it…
Inside: this.setWidth = throttleUpdates(function () {});
You add this after the 'min-width' for-loop:
jQuery(stickyChildren[i]).css("max-width", stickyChildrenWidths[i]);
jQuery(firstRowChildren[i]).css("max-width", firstRowChildrenWidths[i]);
Hi Daniel,
I managed to run your script on a specific page. It's work fine !
Now I'd like to apply your script on all of my pages. Which place of the masterpage should I modify, what code to insert in the masterpage.
I tried this:
< Script type = "text/javascript" src="/SiteAssets/stickyHeaders_3.2.0.js" >< / script >
In the head tag but it does not work.
I found by myself. I have to put this line after body tag.
It's a wonderfull product !!!!!!!!!!
Can you show us in detail how you implemented this in all pages?
Could you please share what you did to make it work on a specific page? I tried to make it work like that but had no success yet.
Any help here would be appreciated :)
Hi Daniel,
I have multiple Web Parts lists and this solution only works with one list and not the others.
Is there any way I can name the web parts I need this solution to work on?
Best regards,
Not sure what I'm doing wrong with v 3.2.0 It doesn't seem to have any impact on the page (no sticky headers) I've attached a screenshot of my set up – am I missing something?
https://1drv.ms/i/s!AM30UfDSufFcsLUo
Hi,
I loaded the JS to a list on SharePoint 2016 On-premise.
After disabling the "Minimal download strategy" site feature it works on Chrome but doesn't work on IE11.
The F12 doesn't show any errors.
Any ideas?
I have loaded it using the content script web part.
Thanks,
Effy L.
In Datasheet view, the blue-outlined box doesn't show on the same line as the line I'm editing, even though it is editing that line!
I am having the same issue. I saved the JS file into site assets, added a script editor to a web part page and added: < Script type = "text/javascript" src="/SiteAssets/stickyHeaders_3.2.0.js"></ script>. The list on the page remains the same. Any thoughts?
Sorry, I meant the same issue as Jason (October 2, 2017 at 5:15 pm).
Hey, great job!
unfortunately there is one problem in Safari (MAC OS X, we have some users that are using this operating system with SharePoint…).
If there is a column bigger than 500px the CSS-Property max-width will limit the width of the column. So the layout doesn't align the header with the columns.
Do you have a solution for this issue?
Thank you for your great work! I have been using this for a while. How do you enable this across all list and library views in a site collection?
you need to refer the file in your master page
Dear Daniel,
I done everything you written with your followers, but does not work.
Do you could give me an Idea about it?
KR
Also Daniel
This feature(sticky header) is not working with the personal views.
Please let me know if you have any update on this or i need to edit anything.
I tried using this in SharePoint Online and it's not working. I used the instructions found here:
https://answers.microsoft.com/en-us/msoffice/forum/msoffice_sharepoint-mso_win10/sharepoint-online-list-lock-header-row-when/3ff2898c-a175-4b77-ace0-c6b3479c1a8c?auth=1
I uploaded your file to /Site Assets/javascript and copied that link into the script editor.
Can you tell me what I'm doing wrong?
Thanks
The latest version of the script still only works with Full Control permissions in SPO =(
I have checked your page and i've found some duplicate content,
that's why you don't rank high in google's search results, but there is a tool that can help you to create 100% unique articles, search for; boorfe's tips unlimited content
Hi,
i am using last version of script and have problem with large grouped lists(more than 10000 items) Header is not loaded correctly and when i manually or with setTimeout run function stickyHeaders() it is working, but webpage is lagging and sometime Header disappear. Could you please give me some advice, how to fix this problems?
Thank you
Martin
Hi Daniel –
We have your code implemented on our 2016 on-prem intranet site. We have added it across the board in the master page. The only issue we are experiencing (both in prior versions and the current version) is that we get a very odd display in the date picker on any of our list/library date fields that virtually makes the date picker unusable. Any idea what's causing this or how to fix it?
Thanks,
Staci
Hi Daniel and thx for your solution,
I had a problem with paging and grouping and I have resolve this with the follow code:
$('table tbody').off('click.meNext').on('click.meNext','#pagingWPQ2next a', function(){setTimeout(function(){
loadJQueryFirstOrExecuteDirectly();
}, 200);
});
$('table tbody').off('click.mePrev').on('click.mePrev','#pagingWPQ2prev a', function(){setTimeout(function(){
loadJQueryFirstOrExecuteDirectly();
}, 200);
});
PS: sorry for my bad english
Using 3.2.0 and still having issue with Grouping not working correctly. How does the above solution get implemented that might help me resolve my issue?
Thanks!
Hi,
I do not have access on MasterPage. So I have added a content editor webpart over 'allitems.aspx' page of SP custom list and give reference of the 'stickyHeaders_3.2.0.js' file by adding script tag in that content editor webpart. Also Deactivate the site feature 'minimal Download Strategy'. But still no luck
SharePoint 2013.
I followed the instructions on adding this to the master pages but now when I go to the lists on the site they come up but none of the data is displayed. Also when I went to revert to a past version of my master page it wont let me. I go through the process it asks if I'm sure I want to go back to a past version, I click yes, then it just does nothing. do you know what I did wrong or how to fix it?
Hello,
it's a great job, kindly there are any possibilities to freeze certain numbers of column in addition to freeze header ?
I know this was posted a long time ago, but for anyone looking at this in 2018, I had this same issue. It worked in Edge but not in Chrome. Turns out the problem was caused by loading this before the required elements had been loaded. I resolved it by putting it right before the closing </body> tag.
I'm just now convincing management that we should try SharePoint online and this has been the number one requested feature. Does anyone have a link to directions on how to implement this with SharePoint online?
Thanks..
Hi. The code function well but unfortunately, our required/default browser is internet explorer and it can't load the scripts. It hangs due to long running scripts. Do you have simple and short code to fixed sharepoint list header please? Thank you.
I'd appreciate that as well.
This works great if I use it on the list itself, but when I have multiple web parts on a page, it doesn't seem to work. Any idea?