JSFiddle - React, Tailwind, and code Playground

HTML

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

    <section class="homeStage green">
      <div class="homeStageContent">
        <p class="projectDescription" data-href="link2" 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) {
        var projectDescription = $(this).find('.projectDescription');
        $('.homeCaption').html(projectDescription.text());
        $('.homeCaption').prop('href',projectDescription.data('href'));
        return; 
      }
    });
  });
  $(document).ready(function () {
    $(window).trigger('scroll');
  });
});