Hi.

All about sticky position in SPPB and Helix https://www.joomshaper.com/forum/question/8541

2. Use SPPB page CSS field, or template's Custom CSS field (Helix), or custom.css file (Helix)

And besides everything else, a very bad idea to use the SPPB pages (if you try exactly to use it) to create a blog and articles. It is better to use the standard Joomla blog and articles + SPPB article editor

I guess I expressed myself imprecisely. I use the standard Joomla blog and articles + SPPB article editor :)

Pls, look this: https://www.joomshaper.com/forum/question/8541#qa-answer-114891 That's exactly what I'm dealing with. The problem is that I have two parent blocks next to each other and the left one affects the right one :(

When I use custom code for sticky, I need to identify the div to apply it to. The problem is that I see two levels in the sppb admin when editing an article. column-id-1688202612331 and sppb-addon-1688202932533

But in the html code of the page, between these two divs, sppb will add two more. Therefore, it is difficult to come up with a css rule that would identify exactly which div to implement sticky on. So I have to create an element with the exact ID for each article :(

Hi Alena.

Add class to the column containing navigation.

For example sticky-col

And use following code

.body-innerwrapper {
    overflow-x: visible;
}
.sticky-col .sppb-addon-wrapper {
    position: sticky;
    top: 100px;
}

Best place for this code is custom.css file in Helix

So I have to create an element with the exact ID for each article :(

Then all that you need to add sticky-col class to the column each time when you create new article. Or you can save whole section and use it as template when create new article.

P.S. Showed by SPPB 3 example . In SPPB 4/5 all the same

nice. what is?

.body-innerwrapper {
    overflow-x: visible;
}

Hi

Thanks for contacting us. Is this solved now? And thanks Pavel for sharing the solution.

-Regards.

nice. what is?

Hi. If the parent element, inside which you want to make a sticky element, has overflow: hidden; , then the sticky position will not work. In Helix, body-innerwrapper element has overflow-x: hidden; by default. So, you need override it. If you use another template, then this is not required. Or something else is required if the sticky position does not work.