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;
}