Position: Sticky; Doesn't Work Inside Page Builder
MF
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!
Pavel
Accepted AnswerHi. 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
MF
Accepted AnswerOf 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?
Pavel
Accepted AnswerOf 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;
}
