Sticky text

[mauraverkleij]

Hi, does anyone know if it's possible to make a text box sticky? So that the text in the upper left corner scrolls along with the entire page instead of just the first row? Thanks in advance! https://mauraverkleij.com/

[alasdair17]

hey, I think if you put everything into a stack in one row then the whole sticky text block should move down with it. Hope that helps.

[arminunruh]

hey!
i'll work on making this feature better!

its just that the whole structure of the html code makes it hard to make sticky work at the moment other than within one row :O

alasdair17's answer is the way to go,

and actually its what lay theme recommends, if you read the text in the sticky modal:

[mauraverkleij]

Thanks for your responses. Unfortunately, this is not an option for us as we expand titles using a row (mauraverkleij.com). Are there any alternatives? Is there no code for this?

I'd like to hear your thoughts.

[panteley]

Try this, and see if it works:

Add a Class to the text box, you want to be sticky. [eg. 'sticky']

Then on Costumize > CSS > Costum Desktop CSS, add this

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 1%;
}

'top: 1%' can be a percentage or px, depending on how you have set the Frame spacing.

[mauraverkleij]

Hello @panteley,

Thank you for your response. I have tried this several times already, but it doesn't seem to work.

Could it be because a new line is starting? Or am I doing something wrong with the settings? When I look at the code via Chrome --> Developer Tools, I also don't see 'Sticky' as an element. Is that normal?

[arminunruh]

hey you can try 2 things:

make the row sticky where your text is in.
just add the class "sticky" to your row in the gridder (right click empty part of a row → set html class and id)

and use this css in lay options → custom css & html

.sticky {
  position: sticky;
  top: 0;
}

the other thing you can try is:
give your text the class "fixed"
then in your css:

.fixed{
    position: fixed;
    top: 50px;
    left: 50px;
    z-index: 20;
}

this will just fix the text at a certain position for the whole page. its almost the same as sticky

one day i will try and change the sticky feature so an element can be sticky for a whole page

you could also

[mogios]

Hey @arminunruh . Is there any easy way to make something sticky with your fixed class custom css, but in the full-screen slider enabled ?

Thx !

[arminunruh]

no sorry