JSFiddle - React, Tailwind, and code Playground

HTML

<div id="body">
    <div id="header"> This header will turn blue if it moves past that line and stay green BEFORE that line</div>
    <hr/>
    <div id="largebody"></div>
</div>

CSS

body {
    font: 12px arial;
}

#header {
    height: 40px;
    width: 100%;
    position: absolute;
    top: 0px;
    border: 1px solid green;
}

hr {
    position: relative;
    top: 120px;
    margin: 0px;
}

#body {
    overflow: scroll;
    height: 300px;
}
#largebody {
    height: 900px;
}
body {
    padding: 0px;
}

JavaScript

$("#body").scroll( function() {
    var value = $(this).scrollTop();
    if ( value > 120 )
        $("#header").css("border", "1px solid blue");
    else
        $("#header").css("border", "1px solid green");
});