Fixed text scroll

[Garrod]

Hey @arminunruh

I’m building a new site that has full screen navigation scrolling. I’ve anchored all the different full browser height rows for click scrolling.

However, what I’d like to do taking it a step further is in certain full screen rows, have a text box header ‘fixed’ in the centre but to only appear when you scroll to that row. So it stays in place while scroll continues but only on that specific row. I worked out how to fix the text box in centre but can’t hide it under other rows. I tried to do it by z-index so the fixed text would be there but underneath the other rows until you scroll to the row it’s intended to be, but no joy. Is there a way to do it in html and css or do I need JavaScript? Seems that way to me. Any advise would be much appreciated.

Hope this makes sense!

Thanks.

[Garrod]

It seems the question has been asked before. Any ideas? laythemeforum.com:4567/topic/5628/position-sticky-behaviour-confined-to-specific-grid-rows/6

[arminunruh]

do you just want sticky elements like when using

position: sticky?

thats on my todo list

im not sure if i understand what youre trying to do correctly

[Garrod]

This post is deleted!

[arminunruh]

i see

ok this is a little complex

basically you create multiple divs in lay options → html and css → html at bottom

use css to position them in the center of your website, position fixed, pointer-events: none; use a z-index so they overlap your content
set the opacity to 0
and use sth like transition: opacity 300ms ease;

now write javascript that listens to the document scroll event
based on the scroll position, show or hide the boxes by setting their opacity to 0 or 1

if u have a budget for this i can code this for you, send an email to info@laytheme.com

[Garrod]

@arminunruh

Thanks! Good to know. I’m doing a JavaScript course at the moment. But I’m doubtful I’ll be able to leap straight into this. So I’ll be in touch.