logo Scroll animation

[Warul Kawa]

Hi!
I'm looking for a way replicate this simple scroll animation, where the first row is fixed, but scrolls away as the second row scrolls in:
https://spaces.is/loversmagazine/interviews/marc-edwards

Appreciate any help you can throw my way!

[felix_rabe]

imagine a container that contains the headline and below the image. now you give the headline a "position: sticky; top: 0;" as a custom css. Maybe you can work with that?

[arminunruh]

yea!

try creating a row,
right click the row, choose set custom row height

enter 200vh as row height

now put a text and image into that row.
right click both and for both click "make sticky"

then play around with the positioning of both elements and - right click on element → space top

[Warul Kawa]

@felix_rabe
@arminunruh

Thanks a lot!

[Warul Kawa]

@arminunruh would it also be possible to hide the menu while on that row, like on the example website?

[Warul Kawa]

i tried this but it's not doing the trick (introhead is the class I gave to the row)

body[data-type="page"][data-id="19"].introhead nav {
	display: none !important;
}

here's the website: http://beabeazleyarchitects.com

[arminunruh]

this wont work. the nav element would need to be a child element of the row with the class. but its not, also the .introhead needs a space before .

i think one way to do this would be to just hide the nav for this page:

body[data-type="page"][data-id="19"] nav {
	display: none !important;
}

and then using javascript, show the nav again on scroll:

<script>
jQuery(document).on('scroll', function(){
if(window.scrollY > window.innerHeight) {
jQuery('nav').css('display', 'inline-block');
} else {
jQuery('nav').css('display', '');
}
})
</script>

add this to lay options → custom css & html → custom head content

you may also need to check if you're on that specific page with javascript,
you may also need to use the newpageshown event:
https://laytheme.com/documentation/custom-javascript.html#newpage-events

to check if you just arrived on this page from another page to then hide the navigation in case your scroll position is < window.scrollY

[Warul Kawa]

Thank you Armin! I'll try that.