How to make a Sticky Sidebar in GeneratePress without 3rd party Plugins?

Hi Sibi,

CSS should be able to achieve the result.

I don't see any content in the sidebar currently, let me know when there's content in the sidebar, and is there any widget you'd like it to be sticky or the entire sidebar?

Yes, the Entire sidebar...

I have added some sample content at the sid bar now...

sometimes, I may need to Sticky, just a widget...

So... if you can share the solution with two cases...

I can use it for my other sites... without asking here again...

Thanks.

Hi there,

you can use this CSS to stick the entire right sidebar:

@media(min-width: 769px) {
  .inside-right-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 40px;
  }
}

And to stick the last widget in the sidebar bar:

.inside-right-sidebar {
    height: 100%;
}

.inside-right-sidebar > *:last-child {
    position: -webkit-sticky; 
    position: sticky;
    top: 40px;
}

The top: 40px; value can be adjusted this affects the top position if the sticky element.
If you wanted to apply it to a left sidebar, simply change the 'right' to 'left' in the CSS Selectors.

Sticking multiple widgets is not as easy and would be bespoke for each site.

What if I want to be Sticky...

The Last Two Side bar Widgets?

Then you can use this CSS:

.inside-right-sidebar {
    height: 100%;
}
.inside-right-sidebar > *:nth-last-child(1) {
    position: -webkit-sticky;
    position: sticky;
    top: 550px;
}
.inside-right-sidebar > *:nth-last-child(2) {
    position: sticky;
    top: 40px;
}

You'll need to adjust the topvalue for each block for best result.