スクロールしたらテキストがついてきて、次のセクションの特定の位置でピタッと配置させたい

Question

前提・実現したいこと

キービジュアル内の真ん中に配置しているテキストが、下スクロールしたらそのまま次のセクションに降りてきて、次のセクションでピタッと配置される、そしてそこから上スクロールで戻るとテキストも一緒に戻り再度キービジュアル内の真ん中に配置されていく…という動きを実装したいです。

下記サイトの様な動きです（ただし下記サイトだと、上スクロールしても要素は元の位置にはこないです）。
https://www.corporate.lasana.co.jp/

PCだとうまくいくのですが、スマホだと上スクロールで戻った時に、テキストがうまく真ん中に配置されず、下にずれて配置されてしまいます。

色々調べて試しているのですが、うまくできずどう書いたらいいか分かりません。
どなたか教えていただけませんでしょうか。
よろしくお願いいたします。

該当のソースコード

<div id="kv"></div>
<section id="section-01">
	<div class="section-inner">
		<h2>テキスト</h2>
	</div>
</section>

#section-01 h2{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	transform: translate(-50%,-50%);
}

#section-01 .section-inner{
    padding: 345px 0;
}

#section-01 h2.fixed{
	position: fixed;
	top: 320px;
}

#section-01 .section-inner.fixed2{
	position: relative;
}

#section-01 h2.fixed2{
	position: absolute;
	top: 220px;
}

$(function() {
  var scrollStart = $('#section-01 h2').offset().top-250;
  var scrollEnd = $('#section-01 .section-inner').offset().top-100;
  var distance = 0;
  $(window).scroll(function(){
    distance = $(this).scrollTop();
    if (scrollStart <= distance) {
      $('#section-01 h2').addClass('fixed');
    } else{
			$('#section-01 h2').removeClass('fixed');
    }
    if (scrollEnd <= distance) {
      $('#section-01 h2').addClass('fixed2');
			$('#section-01 .section-inner').addClass('fixed2');
    }else{
			$('#section-01 h2').removeClass('fixed2');
			$('#section-01 .section-inner').removeClass('fixed2');
    }
	});
});

Comments

[Lhankor_Mhy]

「下記サイトの様な動きです」とのことですが、これのどのテキストのことですか？
「ニュース一覧へ」ボタンとかですか？

[Lhankor_Mhy]

もしかして、テキストとかではなくて中央にある画像のことですか？

Answer 1

当方の環境ではPCでも上手く動作しませんでした。
おそらく、CSSがpx単位で書かれているので、ビューポートが y_emo さんと異なる環境では位置がずれるのだと思います。
CSSを相対的な単位にすれば上手くいくかもしれませんね。

---

ご質問の趣旨と異なりますが、stickyを使うといいのかもしれません。
サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/51ehn9gk/

  <section id="section-01">
    <h2>テキスト</h2>
  </section>

    #section-01 {
      height: 100vh;
    }

    #section-01 h2 {
      position: sticky;
      top: 50vh;
    }