JSFiddle - React, Tailwind, and code Playground

by hbsto

HTML

<article style="border:1px solid black;">
  <h1>title1</h1>
  <div style="border:1px solid black; height:400px;">
  body
  </div>
  <h1>title2</h1>
  <div style="border:1px solid black; height:400px;">
  body
  </div>
  <h1>title3</h1>
  <div style="border:1px solid black; height:400px;">
  body
  </div>
  <h1>title4</h1>
  <div style="border:1px solid black; height:400px;">
  body
  </div>
</article>

JavaScript

var $titles = $('h1');
var areas = [];

$titles.each(function(){

  var $title = $(this);
  
  areas.push({
  	head: $title,
    start: $title.next('div').position().top,
    end: ($title.next('h1').position()||{}).top || ($title.next('div').position().top + $title.next('div').height())
  });
  
});

console.log(areas);

$(window).scroll(function(){

	var scrollTop = $(this).scrollTop();
  
  areas.forEach(function(o){
  	if( o.start < scrollTop && o.end >= scrollTop ) o.head.css({top:0, position:'fixed'});
    else o.head.css({position:'relative'});
  });

});