JSFiddle - React, Tailwind, and code Playground

HTML

<section class="homeStage">
  <div class="homeStageContent">
	  <p class="projectDescription" style="display: none;">Hello</p>
  </div>
</section>

<section class="homeStage green">
  <div class="homeStageContent">
	  <p class="projectDescription" style="display: none;">Hell2o</p>
  </div>
</section>

<a class="homeCaption" href="#"></a>

SCSS

section{
  background-color: gray;
  height: 100vh;
  width: 100%;
  color: black;
}

.homeCaption {
	position:fixed;
	top: 50%;
	left: 50%;
  transform: translate(-50%, -50%);
	color: #fff;
	z-index: 999;
	font-size: 24px;
	text-align: center;
}

.green{
  background-color: green;
}

JavaScript

$( document ).ready(function() {
    $(window).on("scroll resize", function () {
        var pos = $('.homeCaption').offset();
        $('.homeStage').each(function () {
            if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {
                $('.homeCaption').html($(this).find('.projectDescription').text());
                return; 
            }
        });
    });
    $(document).ready(function () {
        $(window).trigger('scroll');
    });
});