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

I found a solution for this "issue" using CSS! headroom.js uses two classes to detect when the header is at top the page and when it's scrolling (not a the top), so I provided the following CSS.

header.headroom--not-top ul li a{
    color: red;
}

header.headroom--top ul li a{
    color: white;
}

Answer 2

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...