JSFiddle - React, Tailwind, and code Playground

HTML

<div>
				<h1>最後の晩餐</h1>
        
				<p>ふいと見た夢のように私は幾度もそれを思い出す。私はその思い出の来る心の青い谿そこを幾度となくのぞき見してみる、まばたきにも、虹のひかりにも、その思い出は消えてしまう。それが私の霊の中から来る翼ある栄光であるか、それとも、幼い日に起った事であったか、よく見極めようとして近よる時――それは、昼のなかに没するあけぼのの色のように、朝日に消える星のように、おちる露のように、消えてしまう。
　しかし私は忘れることが出来ない。けっして、けっして、青草の静かさが私の眼の上にある時まで、あの夕方を忘れはしない。</p>
				<p>子供の涙はにがい。私たちが空しい言葉でいい現わすすべてを子供は湧きあふれる苦痛のしずくに依って語る。その日私は悲しかった。見なれた羊歯の葉の中にも不思議な争闘がひそんでいるように見え、今まで友として見ていた樹々のなかに風のひゅうひゅう鳴る音も自分のそばを流れる水のながれも恐怖の声にきこえ、草の上のしずかな光さえ火焔がもえるかと見えた。</p>
		  </div>
			<div id="bull" class="shark-info">
				<div class="shark-image">
					<img src="https://source.unsplash.com/weekly?water" />
				</div>
				<div class="shark-text">
			
					<p>暗いかげに隠れている激しい人たちが私の頼りなさを見ているらしかった。暗黒が来た時、私は正体の知れない恐しいものに喰われて死んでしまいそうな気がした。窓のなかのやさしい蝋の灯のような眼つきをした母が、いつになっても救いの手をのばして来てくれないのかとも思った。</p>
					<p>B足音が聞えて来たので、私はすすり泣きを止めた。あわれな小さい幼児の私は、野の方から来る人をおそるおそる眺めた。それは背が高くやせて疲れ果てた人で、顔に長い髪がかかっていた。暗い野原の月にひかる小屋のように蒼じろい顔をして、声は低く優しかった。その人の眼を見た時に私はすこしも恐れを感じなくなった。私はその眼の灰いろの影のなかに母の持つような優しみを見いだした。</p>
				</div>
			</div>
			<div id="greatwhite" class="shark-info">
				<div class="shark-image">
					<img src="https://source.unsplash.com/weekly?city" />
				</div>
				<div class="shark-text">
				
					<p>「お前だったか、アルトよ」そう言ってその人は身を屈めて私を抱きあげてくれた。
　もう怖くはなくなった。私の眼のしめりもなくなっていた。
「何を聴いていたのか、小さい子」彼は、私が身をよりかからせて熱心に自分でも分らない何かを聴こうとしているのを見て、私に訊いた。</p>
					<p>「私にも分りません、ただ向うの森の中の方で音楽がきこえるように思ったのです」
　たしかに私はそれを聞いた、月の夜に生れたという笛ふきカルム・ダルの笛の音もこれには勝るまいと思われて、夢の中で弾く歌のように、ふしぎな優しい音であった。</p>

				</div>
			</div>
			<div id="hammerhead" class="shark-info">
				<div class="shark-image">
					<img src="https://source.unsplash.com/weekly?apple" />
				</div>
				<div class="shark-text">
				
					<p>「小さいアルトよ、今夜お前は私と一緒に来ないか」その人は私の額に脣をつけて私の心に落ちつきを与えながら言った。
「行きますとも」私は言った。
　それから私は眠ってしまった。</p>
...

CSS

h1, h2 {
    text-align: center;
}

html {
    background-size: 500px;
}

body {
    margin: auto;
    width: 500px;
    font-family: 'Open Sans';
    font-size: 1.2em;
    background-color: #fff;
    color: #333;
}

img {
    width: 500px;
    height: auto;
}

.shark-image {
    z-index: 0;
}

.shark-text {
    position: relative;
    width: 100%;
    z-index: 1;
    padding-bottom: 20px;
    padding-top: 20px;
    background-color: #fff;
}

JavaScript

/* jquery.stopattop.js

1. Layout your HTML as you normally would. You should not need any
   HTML or CSS changes for this to work.
2. Use a jQuery selector with the stopAtTop() extension and when
   the selected element(s) reach the top of the page, they will stop
   scrolling.

Example usage:

$(document).ready(function() {
  // You can stop multiple elements at the top of the page, and
  // they will just overlap one another.
  $("nav").stopAtTop();
});;

*/

(function($) {
  $.fn.stopAtTop = function() {
    // Start tracking scroll movements when we are adding the first
	// "stop-at-top" element.
    if ($(".data-stop-at-top").length === 0) {
      trackScrolling();
    }

    this.each(function() {
      var $element = $(this);
      var navTop = $element.offset().top;
      var navWidth = $element.width();
      var navHeight = $element.height();

      // Remember the nav's initial position as a reference point.
      $element.data("firstTop", navTop);

      // The <nav> needs to be a fixed-position element for this to
	  // work well, so we'll need to replace it with some placeholder
	  // content that will keep the same document flow.
      $element.after($("<div></div>").css("height", navHeight));
      $element.css({
          "position": "fixed",
          "width": navWidth
        })
        .addClass("data-stop-at-top");
    });
  }

  // Watch scrolling on the window to reposition the selected elements. 
  function trackScrolling() {
    $(window).scroll(function() {
      var scrollTop = $(window).scrollTop();
      
      var tops = $(".data-stop-at-top").map(function () {
        return $(this).data("firstTop");
      });
      
      $(".data-stop-at-top").each(function(index) {
        var firstTop = $(this).data("firstTop");
        var newTop = Math.max(0, firstTop - scrollTop);
        var newBottom = newTop + $(this).height();
        
        var nextScrolledTop = tops[index + 1] - scrollTop;
        if (nextScrolledTop < newBottom) {
 ...