Sticky Image In A Column Not Working
Ondrej
Hi, I’m trying to create a layout in SP Page Builder (Joomla 6) with two columns:
one column = long text second column = image
I want the image to stay visible while scrolling (sticky), but only within that section (not fixed across the whole page).
I’ve tried using position: sticky and I understand that parent elements must not have overflow: hidden, but no matter where I apply it (image, wrapper, column), it just doesn’t work at all.
It behaves like sticky is completely ignored.
I’m not sure:
- where exactly sticky should be applied in SP Page Builder (column vs addon vs wrapper)
- which parent element might be breaking it
- if SP Page Builder has some built-in behavior (animations, wrappers, etc.) that prevents sticky
Has anyone successfully done this in SP Page Builder? Where exactly should I apply sticky and what should I check?
Thanks 👍
Atick Eashrak Shuvo
Accepted AnswerThank you for your confirmation — glad to hear it’s working now.
To clarify, the fix was not only the position: sticky on #addonWrapper, but also addressing how sticky positioning behaves in relation to its parent elements.
position: sticky works only when all parent containers allow it. Specifically, none of the parent elements should have overflow set to hidden, auto, or scroll, as that creates a new containing block and prevents the sticky behavior from functioning correctly.
In your case, the issue was caused by the following rule in the Helix Ultimate template:
.body-innerwrapper {
overflow-x: hidden;
}This restriction was blocking the sticky positioning. To resolve it, I added:
.body-innerwrapper {
overflow: visible;
}You can see the applied change here: https://prnt.sc/N8FKqJ76cWQ8
Regarding reuse
Yes, this approach can generally be reused for other elements (such as images or columns), provided that:
- The element has
position: stickywith an appropriatetopvalue - None of its parent containers restrict overflow in a way that breaks sticky behavior
So while the CSS itself is reusable, the key consideration is always the parent structure. This is why sticky sometimes appears inconsistent across different templates or layouts.
If you run into a similar case in the future, checking parent overflow properties should be the first step.
Atick Eashrak Shuvo
Accepted AnswerThank you for reaching out.
Could you please share the page export file or a backup of the section? That will help me check the structure on my end and identify why the sticky behavior isn’t working in your SP Page Builder layout.
Once I have it, I can give you a precise fix.
Ondrej
Accepted AnswerHi, I actually have the JSON export of the section.
What’s the best way to share it with you? I can upload it somewhere (Google Drive / WeTransfer / Dropbox) and send a link.
Ondrej
Accepted AnswerAs requested, I’m sending the export including media files. https://we.tl/t-rpgaxiknWzPqh6yc
Atick Eashrak Shuvo
Accepted AnswerImport this and check files.fm/u/djcfh9fqw8
Ondrej
Accepted AnswerHi, thanks for the updated JSON – it works now 👍
I see that the solution was adding this CSS:
#addonWrapper {
position: sticky;
top: 120px;
}I just want to clarify:
- Is this the complete solution, or were there any other changes in the structure or settings?
- And can this approach be reused in the future for other elements (e.g. other images or columns), just by applying position: sticky to the correct wrapper?
Or is there something specific in this case that made it work?
Thanks!
Ondrej
Accepted AnswerHi, thank you for the detailed explanation.
That makes perfect sense now — I understand how sticky positioning depends on parent containers and how the overflow setting was causing the issue.
Thanks a lot for pointing me in the right direction, this really helped 👍 Everything is clear now and working as expected.
Appreciate your help!