color change of navigation buttons when scrolling up and when scrolling down

Question

I am using headroom.js to hide my header when scrolling down and make my header section visible again when scrolling up. The header section contains my logo and navigation butto

Answer 1

In my case (using nav class from bootstrap):

nav.headroom--not-top  { color: red; background-color: lightgrey; opacity: .8 }
nav.headroom--top  { color: white }

It work, but the ideal situation would be that the color was a complementary color from the background color when the nabber descend.. Isn't?. Maybe in jQuery...