Navigation floating first but becomes sticky after specific y-position

Joss shared this question 2 years ago
Answered

I was wondering how to achieve the following effect:


I have 3 viewport sized images (each 720 px in height) in vertical alignment where the navigation is floating. After having scrolled down vertically past the 3rd image I want the navigation to become sticky. so i need a trigger to stop the navigation from floating which would be a specific y-value.(in my example that would be 3x720px =2160px) I just can't find the right solution/event to set the y-value.


how would I do that?


any help is much appreciated!


cheers

Comments (3)

photo
2

Hi Joss,


Please check out the following example. Kindly let me know if that is what you need.


https://www.dropbox.com/s/iexy294gysx...


Best,


Sonia Durán

photo
1

Hi Sonia,


first of all: thank you so much for your effort!


It is pretty close. The only thing I can not get right is


that the menu is visible on page load and floats over the


content until a certain y-value (in your example 1080)


from there on I want it to be sticky like in your example.


Best,


Joss

photo
1

Hi Joss,


It's just a general example to help you out to get some ideas about how to create what you need. If you have further inquiries, please provide more details on what you have in mind (examples would help) and I will be happy to help you.


Best,


Sonia Durán