Web part refresh causes sticky headers to disappear in sharepoint list

Question

I embedded a snippet called "sticky headers" that freezes the column titles of a long sharepoint list so that when you scroll down, the column titles remain visible. However, I noticed that the "sticky headers" disappear when the web
part refreshes and reappear on a page refresh. How can I get the code to execute after any partial postbacks? Here is the code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script><script
type="text/javascript">
jQuery(document).ready(function(){
stickyHeaders()
function stickyHeaders(){
if( jQuery.inArray( "spgantt.js", g_spPreFetchKeys ) > -1){
SP.SOD.executeOrDelayUntilScriptLoaded(function () {
findListsOnPage();
}, "spgantt.js");
} else {
findListsOnPage();
$(window).bind('hashchange', findListsOnPage);
function findListsOnPage() {
var lists         
= $('.ms-listviewtable')
var quickEditLists = [];
var listViews     
= [];
$(lists).each(function(i){
if($(this).find('div[id^="spgridcontainer"]').length > 0 ){
quickEditLists.push($(this))
} else if( $(this).hasClass("ms-listviewgrid") == false ) {
listViews.push($(this))
if(quickEditLists.length > 0) {
SP.GanttControl.WaitForGanttCreation(function (ganttChart) {
initializeStickyHeaders(quickEditLists, "qe");
if(listViews.length > 0) {
initializeStickyHeaders(listViews, "lv");
function initializeStickyHeaders (lists, type) {
var top_old       
= [], top_new        = [],
bottom_old    
= [], bottom_new     = [],
stickies      
= [], headers        = [],
indexOffset   
= 0 ;
var style = "" +
"" +
"" +
"background-color:white;" +
"box-shadow:3px 3px 5px #DDDDDD;" +
"display:none"
$(window).unbind('resize.' + type);
$(window).bind 
('resize.' + type, updatestickies );
$('#s4-workspace').unbind('scroll.' + type);
$('#s4-workspace').bind 
('scroll.' + type, updatestickies );
$(lists).each(function(){
headers.push($(this).find($('.ms-viewheadertr:visible')))
$(headers).each(function (i) {
var table = $(this).closest("table");
if(table.find("tbody > tr").length > 1) {
table.parent().find(".sticky-anchor").remove()
table.parent().find(".sticky").remove()       
var anchor = table.before('<div></div>')
stickies.push($(this).clone(true,true).addClass("sticky").attr('style', style).insertAfter(anchor))
var tbodies = $(this).parent("thead").siblings("tbody")
if(tbodies.length > 1) {
tbodies.bind("DOMAttrModified", function(){
setTimeout(function(){
$('#s4-workspace').trigger("scroll", true)
}, 250)
} else {
headers.splice(i-indexOffset,1)
indexOffset++;
//Do it once even without beeing triggered by an event
updatestickies();
function updatestickies (event, DOMchangeEvent) {
$(headers).each(function (i) {
if(DOMchangeEvent) {
width();
return false;
function width() {
stickies[i].width(headers[i].width()).find('th').each(function (j) {
$(this).width(headers[i].find('th:nth-child(' + (j+1) + ')').width())
top_old[i]   
= top_new[i]
top_new[i]   
= Math.round($(this).offset().top - 45)
bottom_old[i] = bottom_new[i]
bottom_new[i] = Math.round(top_new[i] - 30 + $(this).closest('table').height())
stickies[i].offset({
div[id^=WebPartWPQ]").offset().left)
if(top_old[i] >= 0 && top_new[i] <= 0 ||
bottom_old[i] <= 0 && bottom_new[i] >= 0 ||
top_old[i] === undefined && bottom_old[i] === undefined && top_new[i] < 0 && bottom_new[i]
> 0 ) {
width();
stickies[i].fadeIn();
} else if (top_old[i] <= 0 && top_new[i] >= 0 || bottom_old[i] >= 0 && bottom_new[i]
<= 0 ) {
stickies[i].fadeOut();
</script>

Answer 1

Hi,
I believe one of two things are happening, either when the webpart is refreshing, it is a simple ajax call and not a pull page reload, or on the post back, for some reason the list is loading slow enough that your document onReady call is firing too quick.
My suggestion is that instead of triggering your sticky header on document onready, trap the scroll event instead. OnScroll, check to see if the list table exists, if it it does, use "offset" to determine if the table is off the page. If it is
then make sure that the sticky header code has fired to make the headers in fact sticky. As soon as the table is no longer "off the page" then your headers should be reverted to their previous state.
This should not require an entire re-write of code, rather a little code to track and trap scroll instead.
Eric Overfield - PixelMill -
ericoverfield.com -
@EricOverfield