How to change nav bg color & height on scroll using IX2

[jkniep (Josiah Kniep)]

I have a fixed nav set up for our landing page. How can I use IX2 so that when I scroll a few pixels down, the background & height of the nav changes? Here’s how I currently have the trigger set up:

I don’t fully understand how the offset works. Right now I have the bottom offset set to 99.99%.

Here is the link to my site:

https://preview.webflow.com/preview/justonedime?preview=29546121628b83df97aa8d17e9094edb

The page I’m editing is called “China Sourcing Trip”.

After I get the offset figured out, I can easily edit the animation.

Thanks,

Josiah

[cyberdave (Dave S.)]

Hi @jkniep, with the top offset set to 99%, it means that the interaction will run when the element the interaction is applied to is 99% scrolled out of view…

Here is an article that may help wtih understanding the offsets: Reveal on scroll | Webflow University

I am not sure exactly the effect you are looking at, but you could try a 10% offset before triggering the interaction:

I hope this helps.