When will "sticky" become STICKY?

[jbenfield96]

This seems like an age old conversation on this forum, however @arminunruh is there any plan to offer users the ability to make an element "sticky" for a whole page rather than just a row?

This seems like a very common feature amongst websites and something very simple to achieve with competitor web design tools (Cargo, SquareSpace etc.).

Considering I'm reading topic discussions from over 2 years ago (http://laythemeforum.com:4567/topic/6672/sticky-element/4) where users have had to work together to calculate custom code in order to achieve this I find it a bit frustrating that no solution is being offered beyond "have you tried creating your own JQuery to achieve this".

I feel very loyal to LayTheme but when simply features like this go ignored I do feel a little let down.

[arminunruh]

ah yes you're right.
i will work on it!

[arminunruh]

hey !

in the gridder give your element the class "fixed" (without "") (right click element → set html class and html)
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 :D and it works for the whole page

[Starc]

@arminunruh
hi!
i'm stuck with the same issue.
i have a row (100vh), in which i put an image, that i want to stay fixed in the whole page while scrolling.
i'va added custom css class to the image, and then add the class to the custom desktop style (position: fixed;top: 0px; left: 0px;), but it doesn't work.
i've tried to change the height of the row, but nothig has changed.
with the inspector, giving the same css code to the image, everything it's working, but i can't do the same in the builder.
i've tried with a text also and the situation it's the same, with f12 it works, in the builder it doesn't.

am i missing some details?
do you have any other ideas to try?

thankssssss

[arminunruh]

maybe try !important

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

make sure the class is correct, it should be:

fixed

[Starc]

@arminunruh solved! : )

[alvarodoze]

The foundation works... but is a bit of a mess in my opinion as it does not respect the grid (columns) or its starting position (rows). Either if it's in the 5th row, it will start in the first one.

[arminunruh]

yea thats true

.fixed{
position: fixed!important;
top: 50px!important;
width: 50%!important;
left: 20%!important;
z-index: 20!important;
}

you can play around with the width and left parameters to change the width and the space to the left

you might want to remove the "fixed" class from your element, and add the "fixed" class to a row that contains only your text. right click an empty spot of the row, and choose "set html class and id"

if the whole row gets fixed, it might still respect the column left and width of the gridder