jQuery: Changing color links while offset from top

Question

When you scroll down on my website, the background of the navbar fades to black.

How can I simultaneously have the color of the links in the navbar animate to the color white (and back to black when going back up)?

This jQuery code is responsible for the navbar:

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('.page-scroll a').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo'),
        event.preventDefault();
    });
}); 

I tried to add color: '#fff' almost everywhere, but no luck yet.

Answer 1

You have to use a plugin to animate text color ... here's one: https://github.com/jquery/jquery-color. jQuery can't do this on it's own.

Answer 2

Try adding this to your CSS please:

.navbar-custom.top-nav-collapse a { color: #fff; }

Edit: The animation part will be handled by your

a {
    transition: all 0.2s ease-in-out 0s;
}

*in supported browsers ONLY though.