How to freeze header for title in SharePoint List/Library (sticky header).

You have two options- create a file with the code in it (Notepad), upload it to your site somewhere, then either add a content editor web part to your page and link to that file or you can add script editor on the list/library page you want freeze, paste the given script .

Your other option is to make a copy of the master page for your site, then edit that and put your code inside it. Save it and publish it.
This script will make every list’s header freeze/sticky. This means that you will stick/scroll to the bottom of SharePoint’s ribbon when it would otherwise disappear behind it.

Keeping the header visible at all times can greatly improve the usability for the large lists.

The sticky headers keep their full functionality so you can use them so sort, filter, etc.

just you need to inject the below code, please follow the steps

1. goto the library/list.
2. click on Edit Page.
3. Then Add an App ‘Script Editor from Media and Content Catagory’
4. Then click on Script Editor Web Part and add the below script by clicking on ‘Edit Source’ from the Ribbon.
5. After you have paste the below code click on Page Tab click on Stop Editing.
6. That’s it!

<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 = “position:fixed;” +
“top:65px;” +
“z-index:1;” +
“background-color:beige;” +
“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 class=”sticky-anchor”></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({
left: Math.round(headers[i].closest(“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>

Leave a Reply

Your email address will not be published. Required fields are marked *

6 + 2 =


Tech Contents © 2016
Inline
Inline