Apple style navbar colour change on new section

Hi everyone,

I’d love to recreate this effect with a navbar, where the background colour changes when it goes from a dark to light section (and vice versa), just like on the Apple One Page (Apple One - Apple) or their Newsroom Page (Newsroom - Apple).
Would there be any way of recreating this within Webflow? Maybe with some custom code?
I tried using the ‘While Page is Scrolling’ interaction for it but I’m not sure that’s the best way to do it, especially since working out the percentage isn’t exactly a precise science, especially when you’re looking for it to be consistent across multiple viewports.

Please let me know if there’s a way to do it like Apple do on the pages above, within Webflow.

Thanks,
Saim


By the way, here’s my shot at it – feel free to edit this, or create a rough page of your own if you find a better way :slight_smile:
Here is my site Read-Only: LINK

You should use “while scrolling” to do this and just work with the percentage. It is a trial and error but once you get the percent you want it stays conistent across viewports pretty well. I did this on my site for different color sections to keep the burger menu visible. Just make sure that you create two parts. for instance anytime you want to change color, figure out the percent you want it to change, and then create the opposite 1% before it.

77% section; bg-color: black
78% section; bg-color: white

Something like that. And if you want it to change back you would do the same thing again, you always need two interactions.

Hi Saim!

Have you tried the solution that was found in my post? Link to the post: Navbar correctly chaning color between sections, but I can't apply hover state effects on the links

What you need to do is have 2 different navbars, and show/hide them with interactions based on your scroll position.

Hope this helps!