I’m trying to do a basic animation for the Top Nav of my website. You know this thing when you scroll down a little bit, it switches the Top Nav to a smaller Top Nav. Nothing very fancy. But everytime I want to make it happen, what bothers me is: I always have to select a top div as the reference for triggering the interaction.
Isn’t there any way to just select the Top Nav and tell him “If the user scrolls down for more than 100px, switch to the smaller scroll bar”.
Because otherwise I’m forced to always have a rather small height div at the top of each page to trigger the interaction, and link it to the interaction… Over and over.
If you want to be sure that after 100px the navbar morphs, then create a dummy div of 0 pixels that you’ll position absolutely at 100px from the top, and give it an interaction with onscroll trigger. On scroll out, it will affect a different element: the navbar.
I did try that trick, but again it’s a trick, and doesn’t look well coding wise. Specially when I want to create a Template for other CMS/e-Commerce platforms, the Nav must be working without the need to add everytime an extra trick.
Isn’t there a custom code I can throw in to make this “100px” work seamlessly with the interaction?