jquery-bgswitcherで背景画像を切り替えるとナビボタンで位置が移動した時に固定されたままになる

Question

前提・実現したいこと

https://tympanus.net/Freebies/HalcyonDaysTemplate/#

こちらのテンプレートを元にして制作しているのですが
背景画像をランダムで切り替えたいと思い
jquery.bgswitcher.jsを導入して背景画像を切り替えようとしました。
ナビボタンを押してメニューが上から出てきて背景が下に下がっても背景画像を切り替えたい

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

導入自体はうまく行って背景は切り替わるのですが
naviボタンを押すと背景が固定されたまま他の文字等の項目が下がります。

jquery.bgswitcher.jsを使用して背景も下がるようにしたいのですが
どのようにしたらよいでしょうか？ よろしくおねがいします。

追加ーーーーーー

サーバーにアップしまして動作を確認できるようにしました

http://fujiton.html.xdomain.jp/

該当のソースコード

<section class="hero" id="hero">
            <div class="container">
              <div class="row">
                <div class="col-md-12 text-right navicon">
                  <a id="nav-toggle" class="nav_slide_button" href="#"><span></span></a>
                </div>
              </div>
              <div class="row">
                <div class="col-md-8 col-md-offset-2 text-center inner">
                  <h1 class="animated fadeInDown">HALCYON<span>DAYS</span></h1>
                  <p class="animated fadeInUp delay-05s">An exclusive HTML5/CSS3 freebie for <em>Codrops</em></p>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6 col-md-offset-3 text-center">
                  <a href="http://tympanus.net/codrops/?p=19439" class="learn-more-btn">Back to the article</a>
                </div>
              </div>
            </div>
          </section>

.hero {
  background: url('../img/hero-bg01.jpg') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding: 65px 0 300px 0;
  height: auto;
}

	<script src="js/jquery.bgswitcher.js"></script>
	<script>
		jQuery(function($) {
			$('.hero').bgSwitcher({
        images: ['img/hero-bg01.jpg','img/hero-bg02.jpg','img/hero-bg03.jpg'], // 切り替える背景画像を指定
		shuffle: true, // 背景画像の順番をシャッフルするか指定 true=する　false=しない
			});
		});
	</script>

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

jquery.bgswitcher.js
https://github.com/rewish/jquery-bgswitcher/blob/master/jquery.bgswitcher.js

Answer 1

scripts.jsのナビボタンを押した後にdestroyメソッドを追加でいかがでしょうか。

document.querySelector("#nav-toggle").addEventListener("click", function() {
	this.classList.toggle("active");
	$(".hero").bgswitcher("destroy");
});

それでに駄目ならその後、再描画を兼ねて以下

jQuery(function($) {
    $('.hero').bgSwitcher({
images: ['img/hero-bg01.jpg','img/hero-bg02.jpg','img/hero-bg03.jpg'], // 切り替える背景画像を指定
shuffle: true, // 背景画像の順番をシャッフルするか指定 true=する　false=しない
    });
});

参考：https://rewish.jp/blog/releases/jquery_bg_switcher#section-10