JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<header></header>
<section id="content">
    Scroll down!
</section>

CSS

header {
    position: fixed;
    left: 0;
    top: 0;
    height: 100px;
    width: 100%;
    background: transparent;
    transition: background .6s; /* 'slow' is 600ms */
    border-bottom: 1px solid #ddd;
}

header.foobar {
    background: #444349;
}

section#content {
    padding-top: 120px;
    text-align: center;
    min-height: 5000px;
}

JavaScript

$(document).ready(function(){
    $(window).scroll(function(){
        if($('body').scrollTop() > 550){
            $('header').addClass('foobar');
        }else{
            $('header').removeClass('foobar');
        }
    });
});