JSFiddle - React, Tailwind, and code Playground

HTML

<div class="head">
<h1 class="title">Head01</h1>
</div>
<div class="head">
<h2 class="title">Head02</h2>
</div>
<div class="head">
<h3 class="title">Head03</h3>
</div>

CSS

.floating {
position: fixed;
top: 0;
z-index: 3;
}
div{height:1500px;}

h1,h2,h3{
    width: 100%;
    padding:25px;
    position: relative;
    z-index: 5;
}

h1{background:#eee;}
h2{background:#efc7de;}
h3{background:#94b4bf;}

JavaScript

function Up() {
    $(".head").each(function() {
        var el = $(this),
            offset = el.offset(),
            s = $(window).scrollTop(),
            f = $(".floating", this);
            if ((s > offset.top) && (s < offset.top + el.height())){
        	    el.children('.title').addClass("floating")
            } else {
              el.children('.title').removeClass("floating")
            }
    });
}
$(function() {
    $(window).scroll(Up).trigger("scroll");
});