Edit in JSFiddle

Result
HTML
SCSS
JavaScript

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/modaal.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/modaal.min.js"></script>
</head>

<section class="section">
  <p class="section-title">Area 1</p>
    <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</section>
<section class="section">
  <p class="section-title">Area 2</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</section>
<section class="section section3">
  <p class="section-title">Area 3</p>
      <a href="#modal" class="modal-btn js-modal">ここをクリック</a>
	    <div id="modal" class="modal-content">
    <p class="modal-title">ここはモーダルのなかみです</p>
    <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
    <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
  </div>
</section>
<section class="section">
  <p class="section-title">Area 4</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</section>
<section class="section section5">
  <p class="section-title">Area 5</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</section>
<section class="section section5">
  <p class="section-title">Area 6</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</section>

.modal-btn {
  display: block;
  margin: 0 auto;
  color: #fff;
  font-weight: bold;
  background-color: #00a5a0;
  box-shadow: 0 5px 0 #008480;
  text-align: center;
  text-decoration: none;
  width: 200px;
  height: 50px;
  line-height: 50px;
  border-radius: 60px;

  &:hover {
    box-shadow: none;
    transform: translateY(5px);
  }
}

.modal-content {
  display: none;
}

.section {
  padding: 30px;
  background-color: #dff0ef;

  &:nth-of-type(2n) {
    background-color: #d9e8e7;
  }
}

.section-title,
.modal-title {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

p {
  margin: 0 0 10px;
}

$(document).ready(function() {
  // モーダル表示
  $(".js-modal").modaal({
    start_open: false, // 最初は非表示に設定
  });

  // Area3までスクロールしたらモーダルを表示
  function showModalOnScroll() {
    var area4OffsetTop = $('.section3').offset().top;
    var scrollTop = $(window).scrollTop();
    if (scrollTop >= area4OffsetTop) {
      $(".js-modal").modaal('open'); // モーダルを表示する
      // スクロールイベントのリスナーを削除する
      $(window).off('scroll', showModalOnScroll);
    }
  }

  $(window).scroll(showModalOnScroll); // スクロールイベントのリスナーを設定
});