JSFiddle - React, Tailwind, and code Playground

HTML

<h1 class="fixontop">heading 1</h1>
<pre>
content goes here.
.
.
..
.
..
.
..
.
..
.
..
.
..
.
..
.
..
.
..
.
..
.
..
.
..
.
..
.
..
.
..
.
..
.
..
.
.
    long paragraph.</pre>
<h1 class="fixontop">heading 2</h1>
2nd content goes here.
.
.
.
long paragraph.
<h1 class="fixontop">heading 3</h1>
<pre>
content goes here.
.
.
..
.
..
.
..
.
..
.
..
.
..
.
..
.
..
.
..
.
..
.
..
.
..
.
..
.
..
.
..
.
..
.
..
.
.
    long paragraph.</pre>

JavaScript

$(window).scroll(function() {
    if ($('.fixontop:first').position().top === 0 ) {
        alert("hi");//Here some condition which finds if the heading tag is in screenview.  
        $('.fixontop').css({
            'display': 'fixed'
        });
    }
});