My HTML template use Theia Sticky Sidebar - and it works in plain HTML.

When this HTML is transformed to SharePoint masterpage and layouts the script doesn't work.

1 Answer 1


The problem lies in SharePoint layout.

Standard HTML <body> is actually <div id="#s4-workspace">. And when you scroll page, scroll event is fired on #s4-workspace element.

So, to make Theia Sticky Sidebar work (or any other Sticky plugin) - you have to change original JS.

Change all document selectors like this:

$(document).on('scroll.' + options.namespace, function (options, $that)..

to this:

$("#s4-workspace").on('scroll.' + options.namespace, function (options, $that)....

And all body elements:

if ($('body').width() < options.minWidth) {
            return false;

change to this:

if ($('#s4-workspace').width() < options.minWidth) {
            return false;

And this one: $(document).scrollLeft(); to this: $("#s4-workspace").scrollLeft();

Also, it's good idea to use Sticky Sidebar only when page is in display mode and set additional margin top to height of the ribbon plus few pixel like this:

if (inDesignMode != "1") {
        // Theia Sticky Sidebar @ display-mode
            "additionalMarginTop": $("#ms-designer-ribbon").height()+10,

When you set additional margin top like this, it will work both for the administrators and for readers. As sometimes, in my projects, I'm hiding ribbon for readers.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.