Sticky image in a column not working - Forum | JoomShaper
Solved SP Page Builder

Sticky image in a column not working

Asked by Ondrej 5 months ago Last activity 5 months ago

Hi, I’m trying to create a layout in SP Page Builder (Joomla 6) with two columns:

one column = long text
second column = image

https://imgur.com/a/SawlA4P

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 👍

Accepted answer

Marked as the solution
Atick Eashrak Shuvo Staff
5 months ago

Thank 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: sticky with an appropriate top value
  • 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.

9 more replies

Oldest first Newest first Most helpful
Atick Eashrak Shuvo Staff
5 months ago

Thank 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 Asked this
5 months ago

Hi, 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.

https://we.tl/t-Fza4knZtYpb3CKcm

Atick Eashrak Shuvo Staff
5 months ago

Please export with the media files included and share again

Atick Eashrak Shuvo Staff
5 months ago

Import this and check https://files.fm/u/djcfh9fqw8

Atick Eashrak Shuvo Staff
5 months ago

Is the issue solved?

Ondrej Asked this
5 months ago

Hi, 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 Asked this
5 months ago

Hi, 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!

Atick Eashrak Shuvo Staff
5 months ago

Hi,

Thank you for your kind feedback — I’m glad the explanation helped and everything is working as expected now.

If you run into anything similar in the future or need further assistance, feel free to reach out anytime.

Best regards

Log in to reply.