JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bg1"></div>
<div id="bg2"></div>

CSS

body {
    height: 1000px;
}

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

#bg1 {
background: red repeat-x center top;
width: 100%;
height: 40px;
}
#bg2 {
background: green repeat-x center top;
width: 100%;
height: 80px;
}

JavaScript

$(window).on('scroll', function(){
    if($(window).scrollTop() > 40) {
        $('#bg2').addClass('fixed-header');
    } else {
        $('#bg2').removeClass('fixed-header');
    }
});