0

After spending quite a bit of time troubleshooting the StickyHeaders script (How to make a custom list have sticky/floating headers), I finally got it working (awesome!)...there was one important detail missing from the ‘answer’: The content editor calling the jquery and StickyHeaders scripts needed to be placed AFTER the SharePoint (2013) list view web parts on my page.

Now to my question..I have custom HTML in another web part that places an index of links at the top of the page in a fixed position using CSS (-95px from top; in meetings we expand the SharePoint page to full screen and the table appears nicely at the very top). When I scroll down on the page, the StickyHeaders appear above my links table. Does anyone know where/how in the StickyHeaders js file I can adjust the fixed position where the header appears in order for it to display below my table?

Full js for StickyHeaders available here: http://spoodoo.com/downloads/

I suspect the portion of the code I need to modify is in the following section of code, but I just don't know what to change...

var style = ".stickyHeader {" +
                        "border: 1px solid grey;" +
                        "background-color: white;" +
                        "box-shadow: 0 0 6px -2px black;" +
                        "z-index: 1;" +
                    "}" +
                    ".stickyHeader > th {" +
                        "position: relative;" +
                    "}" +
                    ".ms-listviewtable th .ms-core-menu-box {" +
                        "top: auto !important;" +
                        "left: auto !important;" +
                    "}" +
                    ".stickyHeader th:not([id^=spgridcontainer]) {" +
                        "border-bottom: 0 !important;" +
                    "}" +
                    ".ms-listviewtable.addPadding {" +
                        "padding-right: 26px !important;" +
                    "}";
        var div = jQuery("<div />", {
            html: "&shy;<style>" + style + "</style>"
        }).appendTo("body");

Some screenshots:

1) On page load... When page loads

2) Sticky Header in normal view (Header is above table, I want it below): Header appears above links table

3) In expanded view (called "focus on content"), it looks great...I want it to appear this way in the normal view, as well. Expanded View ("focus on content") looks good

New contributor
Andrew Nation is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Your Answer

Andrew Nation is a new contributor. Be nice, and check out our Code of Conduct.

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.