Streaming live at 10am (PST)

Change header icon on scroll?

Is there a way to change the header icon on a sticky header when the user scrolls?

Before the user scrolls the header is transparent. I’d like for the icon to change to black when the user scrolls since the header bg is white.]

Image for context.


Here is my site Read-Only: https://preview.webflow.com/preview/tack-addict-demo?utm_medium=preview_link&utm_source=designer&utm_content=tack-addict-demo&preview=2a26a5ea5fb1cd862445e992244a4642&pageId=5e1e2281ef56a096fe10a058&itemId=5e1e2281ef56a006fe10a1df&mode=preview

Create a While Page is Scrolling animation, select your logo, and add an Invert filter effect. At 0% set the filter strength to 0 so the logo is white when the user scrolls up and at 100% set the filter strength to 100 to make it dark. Change the keyframes for each marker to determine exactly when the logo inverts.

Hope that helps, all the best.

That was it, thanks so much @Sarkis!

1 Like