Tutorial for changing nav bar color on scroll?

Design help General
1

I’m wondering if there are any tutorials on how to change the nav bar color on scroll like www.kabertech.com ?

I read other posts but I was hoping someone can go a little more in depth or point me to a tutorial.

Thanks,

Alex

2

I reckon, you would have to recreate the navbar the same amount of times as you have colours. Apply interactions to each one with the associated section so that when it comes into view the respective navbar appears and the previous navbar disappears.

3

Creating multiple navbars is the best way I’ve found to do this as well. On one of my sites I had a navbar with a transparent background, and then when scrolling past a certain element the transparent navbar would set to “Hidden” and a navbar with a white background would be set to “Block.”

You’ll have to create an interaction that does this, and apply it to an element on the page that you want the navbar to show up when scrolling past. Make sure to check the “Affects different elements” checkbox.