scrolling page overlays/panels

[Glyph]

Hi folks does anyone know of a way to make sliding page panels like this website?
https://bankston.com/au/

They are sort of like page overlays, but rely on scrolling to reveal themselves.

[arminunruh]

can u try this:
right click every row you want to use this effect for
for every row then click "use browser height for row height"

also for every row click "set html class and id"

for html class enter:
sticky-row

also, right click every one of these rows and choose a row background color

add this in:
lay options -> custom css & html -> custom css for desktop

.sticky-row{
position: sticky!important;
top: 0!important;
}

does that work?
can u do my steps and then post the link here so i can see how it looks?

[Glyph]

Hey armin its not launched yet but I will email you private link.

[Glyph]

Armin this actually worked perfectly. Your code is simple. How do I add padding to the top/bottom of these rows now? Right now the content butts right to the edge and needs some breathing room. I have a tried a whole bunch of classes but non worked.

[arminunruh]

nice!

seems like you need to right click the texts in your rows, then space top

[Glyph]

Is there any way to do this globally with a single class that just ads top and bottom padding to all these rows? For some reason applying padding to the .sticky-row class doesn't do anything

[arminunruh]

yes, thats because in browser height rows, text elements are position absolute so they can overlap other elements.

[arminunruh]

.sticky-row .absolute-position{
top: 30px!important;
}

try this please

[Glyph]

FYI I got the row padding to work on this with the following:

.sticky-row .absolute-position{
padding-top: 50px!important;
padding-bottom: 50px!important;
}

[arminunruh]

ah thats a better way of doing it, very good idea!