Change background-color on every .white class and change back on .gray class with waypoint

I'm planning to change the background-color in my (position: fixed;) header menu with waypoint and I need you help with an IF ELSE statement.

My code is

$(document).ready(function(direction) {
$('.gray').waypoint(function() {
if $("header").css('background-color', 'red');
} else {
$("header").css('background-color', 'white');
       }} );
});

Can you help me? And how can I put a smooth change?