jQuery If vertical scroll add a class

add class and animate the header

HTML

<div class="header"><span>Header</span></div>

<div class="content">content</div>

CSS

body {
    font-family: Arial;
    text-align: center;
}

.header {
    color: #ffffff;
    font-size: 1.3em;
    padding: 15px;
    background: #ff0099;
    position:fixed;
    top:0;
}

.header span:after {
    content: ' unscrolled'; 
    display: inline;
}

.header.scrolled {
    background: #ccc;
}

.header.scrolled span:after {
    content: ' scrolled';   
}

.content {
    height: 500px; 
    padding: 20px;
}

JavaScript

// if scroll position is not zero, add a class to header

$(function() {
    var header = $(".header");
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();
    
        if (scroll >= 500) {
            header.addClass(' scrolled');
        } else {
            header.removeClass(' scrolled');
        }
    });
});