How to make the sidebar sticky?

Hi there,

try this CSS:

@media (min-width: 769px) {
    #right-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
}

Thank you, David.

This CSS keeps the sidebar sticky, but I see this message. Please check.

Thats fine, the position: sticky; is a CSS3 property that the Customizer doesn't recongnise. Just a note, this doesn't work on Internet Explorer 11....

Ah, yes, I remember, thank you for this information.

Two more questions:

If I want to use the Sticky sidebar only on specific pages, how could I address this pages?

Or if i don't want the sticky sidebar on my blog page, how could I exclude the sticky sidebar here?

You can use body classes to identify the page and also the :not pseudo class to ignore a page e.g this won't apply to the blog:

@media (min-width: 769px) {
    body:not(.blog) #right-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
}

This would apply to just single posts:

@media (min-width: 769px) {
    body.single-post #right-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
}

Hi,

How would I use this code for BOTH left and right sidebars please?

Thanks

Hi there,

unfortunately that is not possible using this method as elements within the same container become stuck together. It would require Custom Javascript to do this.

Hi,

Problem is I can't even find a plugin that will achieve this...

Scratch that.

I've managed to find a widget plugin that will achieve the desired result.

If anybody is interested it's this one:

https://wordpress.org/plugins/q2w3-fixed-widget/

Awesome - thanks for sharing

Well it's the best solution I can find.

After extensive research, it's almost impossible to stick both left and right sidebars without knowing complex code.

That widget plugin will allow you to select and stick any widget you want, in any sidebar you want.

It's not the sidebar(s) itself.

Unfortunately it is really complex doing this with code. Might be worth reaching out to the plugin author and ask if there is a function to apply it to sidebar classes. The only issue i can see is that both elements occupy the same parent container so results may not be as expected.

I saw the WP Sticky Sidebar plugin working well with both sidebars. But I am not sure if it works for all browsers.

Hi, maybe it works for you.
https://es.wordpress.org/plugins/sticky-menu-or-anything-on-scroll/

Cheers