jQueryとCSSで、スクロールするとセクションの境目で文字も切り替わる

サイトの中央にテキストを配置し、スクロールするとセクションの境目で文字も切り替わるページを制作しました。レスポンシブ対応ですが、うまい方法が思いつかずガタガタしているので、参考になるソースや修正のヒントをいただけると嬉しいです！
~~サンプルページはこちら~~（2021/8 追記: 閉じてしまいましたmm）

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <div id="home">
    <header>
        <a href="" class="st-Header_Logo"><img src="./img/logo.jpg" alt=""></a>
        <div class="st-Header_MenuBtn">
          <span></span>
          <span></span>
          <span></span>
        </div>
    </header>
    <section id="home-sec-1" class="sw-section">
      <div class="sw-Container__FixCenter">
        <h1 class="home-Title">Welcome!<br>test</h1>
      </div>
    </section>
    <section id="home-sec-2" class="sw-section">
      <a href="">
        <div class="sw-Container__FixCenter">
          <h2 class="home-Title">ABOUT</h2>
          <p>introduction</p>
        </div>
      </a>
    </section>
    <section id="home-sec-3" class="sw-section">
      <a href="">
        <div class="sw-Container__FixCenter">
          <h2 class="home-Title">WORKS</h2>
          <p>website/leaflet</p>
        </div>
      </a>
    </section>
    <section id="home-sec-4" class="sw-section">
      <a href="">
        <div class="sw-Container__FixCenter">
          <h2 class="home-Title">PROJECT</h2>
          <p>website/leaflet</p>
        </div>
      </a>
    </section>
    <footer>
      <p>Copyright (c) 2017 Chinatsu All Rights Reserved.</p>
    </footer>
  </div>
</body>
<script src="./js/jquery-3.2.0.min.js"></script>
<script src="./js/module.js"></script>
</html>

CSS

/* Reset
========================================================================== */
html{
  font-size: 62.5%;/*10px*/
  color: #333;
}
a{
  color: #333;
}

/* Header
========================================================================== */
#home{
  margin-top: 40px;
}
header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  height: 20px;
  padding: 10px;
  color: #fff;
  background-color: rgba(255,255,255,.6);
  z-index: 20;
}
.st-Header_Logo img{
  height: 20px;
}
.st-Header_MenuBtn{
  width: 20px;
  position: relative;
}
.st-Header_MenuBtn span{
  width: 20px;
  height: 2px;
  position: absolute;
  border-top: 3px solid #333;
  border-radius: 2px;
}
.st-Header_MenuBtn span:first-child{
  top: 0px;
}
.st-Header_MenuBtn span:nth-child(2){
  top: 8px;
}
.st-Header_MenuBtn span:nth-child(3){
  top: 17px;
}

/* Section
========================================================================== */
.sw-section{
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
}
.sw-Container__FixCenter{
  position: absolute;
  width: 100%;
  text-align: center;
}

/* Home
========================================================================== */
.home-Title{
  font-size: 4rem;
  font-weight: bold;
}
.home-Title+p{
  font-size: 2rem;
}
#home-sec-1{
  background: url(../img/home-img-1.jpg) top /cover fixed no-repeat;
}
#home-sec-2{
  background: url(../img/home-img-2.jpg) top /cover fixed no-repeat;
}
#home-sec-3{
  background: url(../img/home-img-1.jpg) top /cover fixed no-repeat;
}
#home-sec-4{
  background: url(../img/home-img-2.jpg) top /cover fixed no-repeat;
}

/* Footer
========================================================================== */
footer{
  text-align: center;
  height: 40px;
}
footer p{
  padding-top: 15px;
  font-size: 1rem;
}

jQuery

/*global $ window*/

$(function () {
  'use strict';

  /*background size*/
  var swSectionHeight = $(window).height();
  $('.sw-section').css('height', swSectionHeight - 40);

  /*scroll event*/
  $('#home-sec-1 .sw-Container__FixCenter').each(function () {
      $(this).css('top', swSectionHeight / 2.5);
    });
  $(window).scroll(function () {
    var windowSt = $(window).scrollTop();
    $('#home-sec-1 .sw-Container__FixCenter').each(function () {
      $(this).css('top', swSectionHeight / 2.5 + windowSt);
    });
    $('#home-sec-2 .sw-Container__FixCenter').each(function () {
      $(this).css('top', swSectionHeight / 2.5 + windowSt - swSectionHeight + 40);
    });
    $('#home-sec-3 .sw-Container__FixCenter').each(function () {
      $(this).css('top', swSectionHeight / 2.5 + windowSt - swSectionHeight * 2 + 80);
    });
    $('#home-sec-4 .sw-Container__FixCenter').each(function () {
      $(this).css('top', swSectionHeight / 2.5 + windowSt - swSectionHeight * 3 + 120);
    });
  });

});

未完成ですが、何かに流用できそうであればご自由にどうぞ。