JSFiddle - React, Tailwind, and code Playground

HTML

<div class='wrap'>
    <div class='header'>
        <a href='#'>link</a>
    </div>
</div>

CSS

.wrap {
    height:1000px;
    background:green;
}
.header {
    height:50px;
    background:blue;
    position:fixed;
}
.header > a {
    color: #ccc;
    font-size:2em;
}
.header.scroll > a {
    font-size:1em;
}

JavaScript

$(window).scroll(function(){
    if ($(window).scrollTop() > 400) {
        $('.header').addClass('scroll');
    }
    else {
        $('.header').removeClass('scroll')
    }
});