Streaming live at 10am (PST)

☞ IX Interactions: Scroll more than 50px = Trigger Interaction (possible?)


#1

Hello @Everyone,

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.

Any ideas?
Thank you!


#2

You can use any object as a trigger.

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.


#3

Thanks Vincent for your reply!

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?


#4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.