Multiple row sticky elements

[cesarbourgeois]

Hi everyone,

I recently update my website in a one page approach and with new design: https://www.bourgeoiscesar.com/

If you open the website you can notice that each project name+description is written after its content/images. I tried to use sticky elements to have it fixed on top (at the place of the BIO text for instance) while scrolling through and then switching to the following. The issue is that sticky elements works only in one row and you must use stacks to achieve the desired effect. I can't have the same freedom in the grid as I cant add two images side by side + aligned horizontally.

Is there any way to make sticky elements through multiple and specific rows?
Or another way with another logic I'vent even thought about?

Thank you and good Sunday!

César ;^)

[arminunruh]

hey great website!

well you could make elements position fixed using custom css, but thats something quite different than sticky

you could make a whole row sticky using custom css, by right clicking the row, giving it a class name and then creating custom css for it

but then the row won't ever stop sticking to the top once you have scrolled it into view

im in the process of re-developing the gridder and then i will add more functionality to it

so this will take a very long time!
so at the moment theres no other way to do it except put things in a stack and yes it really limits your ability to layout things :|

[sebagaga]

Hi, I am curious how to do this:

You can make a whole row sticky using custom CSS by right-clicking the row, giving it a class name, and then creating custom CSS for it.

I have been trying a few methods through CSS, but I haven’t been able to get it to work. The row simply doesn’t stick. Is there something I should consider? is this possible?
many thanks

[arminunruh]

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

and give your row a class of:

sticky-row

[sebagaga]

This was extremely helpful! I don’t know how many hours I spent on this. Thanks a lot

I had to add some extra pixels to the top and specify the value in pixels. Adding a background color also helped.

Here’s the final CSS that worked for me:
.sticky-row {
position: sticky;
top: 50px;
z-index: 9999;
background: white;
}