How can I replicate the behvaior of this nav bar as seen on Apple's website?

Design help Animations & Interactions
1

I want to replicate the behavior of this local-nav as seen on Apple’s website. As you’ll notice, when you scroll over a dark section their localnav switches colors. I want to replicate that.

Here is Apple’s page that displays this functionality: AirPods (2nd generation) - Apple

Here you can see this project in read-only: https://preview.webflow.com/preview/fiveatoms-staging?utm_medium=preview_link&utm_source=designer&utm_content=fiveatoms-staging&preview=7aff91de087742b04e751df5ed068545&mode=preview

Here is my public share link: CLICK

Published site: https://fiveatoms-staging.webflow.io

2

Hi @fiveatoms,

Seems like you managed, right?

3

Not quite, when you scroll down the first time, it works decently well. However, when you scroll up, everything goes whack.