I’m trying to create a small menu with buttons that, when clicked, will smoothly scroll to specific sections of my webpage. The menu is positioned somewhere in the content, but I want it to become “sticky” and stay at the top of the page ONCE I scroll past it.
So far, I have basic anchor links for scrolling, but I’m not sure how to make the menu stick only AFTER it’s scrolled past.
Any advice or code snippets would be super helpful! Thanks in advance!
You can try using On Scroll animations, play with the effect that fits you better (Move, maybe?). Take this into consideration:
To fixed and element, you must select a fix point from the Position control. Try using the point closest to the expected position. For example, if you want the menu to stay close to the top-center of the page, then use the top-center reference point. While you can use any, the outcome can vary drastically if you select other reference points.
Once a widget is fixed, you get the option to add a delay to the animation. You can use this to trigger the effect after X value has been scrolled.
As with any other form of animation, trial and error is anticipated to attain the desired outcome.