JSFiddle - React, Tailwind, and code Playground

HTML

<div class="p-circle" style="position: fixed; top: 0;">
    This is the text.
</div>
<div class="p-circle-s" style="position: fixed; top: 50px;">
    This is also text.
</div>

<div style="height: 2000px">

</div>

JavaScript

$(window).scroll(function () {
	if ($(this).scrollTop() > 600 && $(this).scrollTop() <= 1400 && $(".p-circle").text() != 'Text 1') {     
		$('.p-circle').fadeOut(500, function() {
    	$(this).text('Text 1').fadeIn(500);
  	});
  	$('.p-circle-s').fadeOut(500, function() {
    	$(this).text('Text 2').fadeIn(500);
	  });                     
	} 
	if ($(this).scrollTop() > 1400 && $(".p-circle").text() != 'Text 1 updated') { 
  	$('.p-circle').fadeOut(500, function() {
    	$(this).text('Text 1 updated').fadeIn(500);
   	});
   	$('.p-circle-s').fadeOut(500, function() {
     	$(this).text('Text 2 Updated').fadeIn(500);
   	})
	}
});