Sticky not working

[alvarodoze]

Sticky elements are not working...

"Sticky 1" and "Sticky 2" have the sticky functionality applied, but they are not reacting. Is it a bug, or am I not setting it right?

https://alvarodoze.com/version_trial_3-0/?preview_id=482&preview_nonce=f62920bd17&preview=true

[arminunruh]

Hey, I can't preview this page because I need to be logged in as an admin to preview it. Can you just publish it, and then I can take a look?

[alvarodoze]

Sorry, here: http://alvarodoze.com/version_trial_3-0/

[arminunruh]

Hey, can you please read the description in the sticky modal? It says that it only works in one row.

[alvarodoze]

Hmm, I only defined it in the ‘Sticky 1’ component and it still not working. Also, are you saying I can’t have multiple sticky components on the page if they’re in different rows?

Thanks!

[arminunruh]

You have your sticky text in a row right now. Let's say that text is on the left side of the row. Now, if you put a portrait image to the right side and make it a little bigger, that creates free space underneath the sticky text because the row gets enlarged. Of course, the sticky text has to be aligned to the top inside the row.

Now, if you scroll down, that sticky text will be sticky within this row.

So if you would for example want to have a sticky text on the left side and then a lot of content on the right side, you can use a stack element and put lots of images above one another inside the stack element.

Or you could also instead just have one row where your sticky things will be inside. Right click an empty part of the row and choose "Set HTML class and ID". For class, enter:

sticky-row

then Enter this css in "lay options" -> "custom css & html" -> "custom css for desktop":

.sticky-row{
    position: sticky;
    top: 0;
    z-index: 99;
}

[alvarodoze]

Okey.. now I understand. Thank you so much for clarifying. <3