Navigation floating first but becomes sticky after specific y-position
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!