Sticky sidebar

Hi Nico,

GP doesn't have this option built in.

If you can link us to the page and let us know from which widget you want it to be sticky, we can help with the CSS.

Let me know :)

Hello Ying. Sorry for my late reply, but unfortunately your message ended up in our spam filter :(

If I understand your answer correctly, it cannot be resolved in such a way that it works for any number of widgets. Correctly?

If so, then we would prefer not to implement it via CSS.

best regards
Nico

Hi there,

with a CSS only option you're kind limited to how that works. If all the 'widgets' were inside a single container - then you could. If they all sit in their own containers then it gets complicated. And if the number of 'widgets' are not known then you need to use Javascript.

If you have a site you want to apply it to then we can take a look.

Good evening David!

Thank you very much for your timely feedback. We are currently working on the relaunch of our website and are using the GeneratePress theme for the first time. You can see the test page with the widgets here:

see private area.

The reason we found the StickySidebar solution so interesting is that the site would look much more present.

If you scroll down the page and at some point no more widgets are displayed on the right edge, it looks pretty lost.

I hope you understand what i mean?

best regards from Germany
Nick

Hi Nico,

Give this CSS a try:

div#right-sidebar .inside-right-sidebar {
    position: sticky;
    top: 65px;
}
.inside-right-sidebar {
    flex: 1;
}

Feel free to adjust the 65px to adjust the position of the sticky sidebar/

Let me know if this helps :)

Good morning @Ying
good morning @David.

Thanks for the support. Unfortunately, the CSS snippet doesn't work as shown on this page:

https://www.ostsachsen.de/goerlitz/boats-friends-neisse-bootstouren/

You can see on this page that the sideback only becomes stickey when the last widget has been reached while scrolling.

I think the GP support is great, but I don't think that a CSS snippet is the solution here. It's an additional feature ...

Warm greetings from Germany
Nick

Hi Nick,

The CSS provided by Ying won't work on that page as the site isn't made with GeneratePress. (It's using Tripster).

Since the theme is different, the selector will not match. That's why it wasn't working.

It's best to contact Tripster's developer/support for this. As they'll know more about what's best practice in making their sidebar widgets sticky. (Perhaps they have a toggle to make widgets sticky somewhere in their theme's settings UI incase they have one.)

Good morning Elvin,

the page: https://www.ostsachsen.de/goerlitz/boats-friends-neisse-bootstouren/

serves only as an example for StickySidebar.

Our side is: (see private area)

Please note: The StickySidebar in the example page will only be active when the last widget is reached when scrolling down.

I've tested the CSS Ying provided and it seems to be working fine.

https://share.getcloudapp.com/P8u8AWd6

Can you share how you're adding the CSS?

Good Morning @Ying!
good Morning @Elvin!

We have the CodeSnippet:

div # right-sidebar .inside-right-sidebar {
position: sticky;
top: 65px;
}
.inside-right-sidebar {
flex: 1;
}

implemented again. You can see the result here:

(private area)

Does the representation look good on you?

If necessary, we can also make a presentation video of it.

send the best greetings from Germany and thank you for your help
Nick

I can confirm the CSS is working and the sticky sidebar looks good :)

Hello @david!
Thank you very much for your great support. I really appreciate that.

If you look closely at the video in the private area, you can see that the sidebar becomes sticky for a moment when you scroll down in the middle of the route and then move on again. The same thing happens when you scroll up.

I hope you see what I mean.

That's the normal behavior, the CSS make sure that the sidebar has the same length as the main content area.

When the end of the sidebar reaches the end of the content, they will scroll up together.

It has the exact same behavior as the example site you provided.