how to change class after scroll somewhere

I need my header to change its color after scroll. I know there is a lot of questions with the same problem over here, but I have already tried all the solutions and it doesn't work. Could you guys help me please?

HTML

<div class="header">HEADER</div>

CSS

.header{
background-color: red;
color: black;
width: 100%;
height: 80px;
position: fixed;
top: 0;
left: 0;

}

.header .change{
background-color: black;
color: red;

}

Jquery

$(window).scroll(function() {    
var scroll = $(window).scrollTop();

if (scroll >= 500) {
    $(".header").addClass(".change");
} else {
    $(".header").removeClass(".change");
}

});

JSfiddle