Position: Sticky; Doesn't Work Inside Page Builder - Question | JoomShaper

Position: Sticky; Doesn't Work Inside Page Builder

M

MF

SP Page Builder 2 weeks ago

Hi there! I spent a day trying to recreate somthing like this, using raw-html addon in Page Builder: https://rafailyk.github.io/stickymate/

The problem is that it seems that anything wrapped into sppb sections, rows and columns cannot have "position: sticky" css-rule, or at least, it doesnt' seem to work.

See simple sample here (4-th): https://developer.mozilla.org/en-US/docs/Web/CSS/position

Question: how can I make css "position: sticky;" to work correctly in Page Builder? (NOT NAVIGATION! NOT "FIXED" POSITION!)

Thanks in advance!

0
4 Answers
Pavel
Pavel
Accepted Answer
2 weeks ago

Hi. The problem is not in Page Builder, but in the position sticky property itself. You need to learn a little more deeply about position sticky

0
M
MF
Accepted Answer
2 weeks ago

Of cause I DID a research before refering to forum. for example, I take this code: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sticky_element which definitely working, and seems quite legit to me.

and copy-paste it into raw-html addon (slightly modifying to self-contain css and strip out body etc tags). aand it doesn't work inside Page Builder. See attached screencast.

https://www.dropbox.com/s/lk4wa3ygasemyj7/not-a-sticky.gif?dl=0

https://www.dropbox.com/s/awd3m7tixr58y2n/not-a-sticky.mp4?dl=0

(and yes, I know that sticky needs siblings tags to work over them, but as you can see - inside page buikder it just doesn't work)

Can you post the code with "position: sticky" that worked for you?

0
Pavel
Pavel
Accepted Answer
1 week ago

Of cause I DID a research before refering to forum.

I doubt that you have found enough information to understand how it works. POSITION STICKY depends on the parent container, from its height and overflow properties. In general, in most cases POSITION STICKY is not applicable. The deeper the DOM structure is the element, the harder it is to make it work in this mode. This may require the breaking of the global overflow properties for parent elements, up to Body. Too much price, in order to make it work. Use old good JavaScript solutions.

Well, as for the working code for Sp Pb. Add the following code to what you already have and you will understand how it works. And what can be the area of its application.

.sppb-addon.sppb-addon-raw-html .sppb-addon-content {
    height: 500px;
    overflow: auto;
}

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 1 week ago

Hello MF

Sorry, we do not provide customization support. It is on you only. Thanks Pavel for the tips.

Best regards

0