垂直スクロールさせたコンテンツの下部にスクロール解除させた要素を追加したい

前提・実現したいこと

「fullPage.js」というプラグインを使用しています
垂直スクロールさせたコンテンツの下部にスクロール解除させた要素を追加したいです

今のままですとフッター部分や垂直スクロールさせた部分しか表示されない状態で困っています

他にも探したのですが思うようなプラグインがなく
どなたかご存知でしたら教えて頂けないでしょうか

やりたいことは
垂直スクロールさせる要素が終わったら下のコンテンツも読み込ませたいです。

【使用したプラグイン】
参考サイト：
https://webkaru.net/jquery-plugin/fullpage-js/
参考サイトデモ：
https://webkaru.net/jquery-plugin/sources/fullpage/demo.html

発生している問題・エラーメッセージ

下記のようなソースですと「.section」の要素しか表示がされず
「#test」が表示されない状態です

デモソースコード

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="jquery.fullPage.js"></script>
<script>
$(document).ready(function() {
  $('#fullpage').fullpage({
    sectionsColor: ['red', 'green', 'blue', 'orange', 'purple']
  });
});
</script>
<style>
h1, p {
  text-align: center;
}
</style>
</head>
<body>
 
<div id="fullpage">
  <div class="section active" id="section0">
    <h1>XXXX</h1>
  </div>
  <div class="section" id="section1"><h1>タイトル</h1></div>
  <div class="section" id="section2"><h1>タイトル</h1></div>
  <div class="section" id="section3"><h1>タイトル</h1></div>
  <div class="section" id="section4"><h1>タイトル</h1></div>
</div>
 
<div id="test">
<h1>スクロール解除させて表示させたいブロック</h1>
<p>タイトル</p>
</div>
</body>
</html>