JSFiddle - React, Tailwind, and code Playground

by Kigris

HTML

<body>
<div class="container-empty"></div>
<ul>
<div id="divfix"><li id="lifix">Text 1 FIXED</li></div>
<div id="divfix2"><li id="lifix2">Text 2 FIXED</li></div>
<div id="divfix3"><li id="lifix3">Text 3 FIXED</li></div>
</ul>
<div class="container-footer"></div>
</body>

CSS

.container-empty {
  height:200px;
  background-color:#000;
}
.container-footer {
  height:800px;
  background-color:#fff;
}
li {
  list-style-type: none;
}
#divfix {
  background-color:#e3e3e3;
  height:300px;
}
#divfix2 {
  background-color:#c3c3c3;
  height:300px;
}
#divfix3 {
  background-color:#a3a3a3;
  height:300px;
}

JavaScript

var toppag=$("#lifix,#lifix2,#lifix3");
var pag=$("#divfix,#divfix2,#divfix3");

toppag.css({position:"relative"});


$(window).scroll(function () {
    var scroll=$(this).scrollTop();
    pag.each(function(i,n){
        if(scroll < $(this).offset().top) {
            toppag.eq(i).css({'position':'relative'});
        }
        if(scroll > ($(this).offset().top + toppag.eq(i).height()))  {
            toppag.eq(i).css({'position':'fixed',"top":"0"});
        }
    }); 
});