Fixed navbar when scrolling that changes it color

Hey guys!

I’ve been dealing with this one so much time an that’s why I’m here once again. What I want to do is to simply show a navbar when it scrolls up. This is what I have achieved so far:

As you can see it works pretty well but I’m not sure about the animation. For the white bg I added
a “while the page is scrolling” animation. The problem starts when the page is larger or shorter, because the bg doesn’t appear at the same position.

But the big issue is that I have pages were the top navigation is white. Here is an example:

The idea should be the same than from the previous page but when the fixed scrolled navbar is arriving to the top just change it’s bg to transparent and the color of the elements inside. I have tried with 2 different navbars but I don’t know if that may work…

Thank you once again! :blush:

Here is my site Read-Only:
([how to share your site Read-Only link][2])