JqueryプラグインのScrollifyとスクロールイベントを同時に動作させたい

模写サイト制作で練習中のコーディング初心者です。
以下のサイトの模写をしているのですが、Jqueryの挙動が思ったように動きません。
https://www.innthepark.jp/

JqueryプラグインのScrollifyとスクロールイベントが同時に動作しません。

実現させたいこと

上記のサイトと同じ動作をさせたいです。
具体的には

1.ファーストビューからスクロールすると次のセクションにスクロールする。
(JqueryプラグインのScrollifyを使用し、実現済み)

2.左上のハンバーガーメニューアイコンをクリックすると、ドロワーメニューとヘッダーを表示させる。
(Jqueryで実現済み)

3.次のセクションに移った時にヘッダーを表示させる。

3の段階で思ったように挙動せずに苦戦しております。
Scrollifyはあくまで使いやすいと思った手段ですので、他に手段があればご教授ください。

発生している問題

次のセクションに移った際に、ヘッダーが出現しない。

気になる点は、ドロワーメニューと同時にヘッダーを表示させた後は想定通りに動作することです。

問題の原因が全くわからない状況です。

該当のソースコード

以下のソースコードはテキストなど不要と思われる箇所を省略しております。

html
1<body>
2  <a href="#" id="openMenu"><i class="fas fa-bars"></i></a>
3  <a href="#" id="closeMenu"><i class="fas fa-times"></i></a>
4
5  <header> 
6  <div class="header-inner">
7    <img src="/img/logo.png" alt="">
8    <div class="header-right">
9      <div class="reservation">
10        <div class="reservation-text">
11        <a href=""><p>予約  <i class="fas fa-couch"></i></p></a>
12        </div>
13      </div>
14  </div>
15  </div>
16  </header>
17    <div class="nav-wrapper"> //ドロワーメニュー
18        <div class="gnav">
19          <ul>
20            <li></li>
21            <li></li>
22          </ul>
23        </div>
24      </div>
25
26  <div class="swiper-container section"> 
27    <div class="swiper-wrapper">
28      <img src="/img/logo.png" alt="">
29      <div class="swiper-slide"><div class="slide-img slide1"></div></div>
30      <div class="swiper-slide"><div class="slide-img slide2"></div></div>
31      <div class="swiper-slide"><div class="slide-img slide3"></div></div>
32    </div>
33  </div>
34
35  <div id="first-view" class="section">
36    <div class="text-wrapper">
37      <h1>林間学校、覚えていますか?</h1>
38    </div>
39  </div>

SCSS
1header{
2  display: none;
3  position: fixed;
4  height: 60px;
5  top:0;
6  z-index: 20;
7  &::after {
8    content:'';
9    display:block;
10    }
11}
12
13#openMenu{
14  position: fixed;
15  top:2%;
16  left: 2%;
17  color: $light-green;
18  z-index: 9999;
19}
20#closeMenu{
21  position: fixed;
22  top:2%;
23  left: 2%;
24  color:$light-green;
25  z-index: 9999;
26  display: none;
27}
28.nav-wrapper{
29  display: none;
30  position: absolute;
31  background-color: $green;
32  width: 50%;
33  height: 100%;
34  z-index: 10;
35}
36

JS
1$(function(){
2
3  $(document).scroll(function () {
4    var s = $(this).scrollTop();
5    var m = 30; 
6    if(s > m) { 
7    $("header").slideDown('slow');
8    } else if(s < m) { 
9    $("header").slideUp('slow');
10    }
11    });
12
13
14  $('#openMenu').click(function(){
15    $('.nav-wrapper').animate( { width: 'show' }, 200 );
16    $('header').animate( { height: 'show' }, 200 );
17    $('#openMenu').fadeOut();
18    $('#closeMenu').fadeIn();
19    $('body,html').css({"overflow":"hidden","height":"100%"});
20    $('.nav-bottom').css('left', '0')
21  });
22  $('#closeMenu').click(function(){
23    $('body,html').css({"overflow":"visible","height":"100%"});
24    $('#openMenu').fadeIn();
25    $('#closeMenu').fadeOut();
26    $('header').animate( { height: 'hide' },{
27      duration: 20,
28      queue: false,
29      });
30    $('.nav-wrapper').animate( { width: 'hide' }, 100 );
31  });
32
33  $.scrollify({
34    section : ".section",
35    interstitialSection : "",
36    easing: "easeOutExpo",
37    scrollSpeed: 1100,
38    offset : 0,
39    standardScrollElements: "#main",
40    setHeights: true,
41    overflowScroll: false,
42    updateHash: false,
43    touchScroll:true,
44    before:function() {},
45    after:function() {},
46    afterResize:function() {},
47    afterRender:function() {}
48    
49  });
50  
51});

試したこと

id=closeMenu をクリックすると思った通りの動きをするため、クリック後に指定したcssをはじめから指定しましたが、変化がありませんでした。

補足

リセットcssとしてress.cssを使用しております。
https://github.com/filipelinhares/ress

Lhankor_Mhy

2019/09/21 01:02

before を使えば解決するように思うのですが、すでにご検討されましたか？

us_k

2019/09/21 04:51

ご回答ありがとうございます。疑似要素の使い方に関しては勉強不足でして、よろしければご教授いただけますでしょうか。

Lhankor_Mhy

2019/09/21 04:59

あ、すみません。擬似要素ではなくて、scrollifyの方です。ドキュメントはお読みになられましたか？

us_k

2019/09/21 05:19

ドキュメントとはどのドキュメントを指しているのでしょうか？ beforeの使い方についての説明は読んだのですが、具体的な使い方が分かりません。

Lhankor_Mhy

2019/09/21 05:38 編集

もちろん、scrollifyのドキュメントについてですが、お読みになられたが、使い方がわからなかったのでお試しになっていない、ということですね。わかりました。

行動規範の内容に同意します

回答1件

ベストアンサー

オプションのbeforeを使えばいいかと思います。
ご提示のURLのページを拝見すると、スクロールし始めたタイミングでバナーが表示され始めていましたから、こちらがいいかと思います。

before

A callback that is fired before a section is scrolled to via the move method. Arguments include the index of the section and an array of all section elements.

jQuery Scrollify - Power steering for your scroll wheel

実際のコードの書き方は、↓こちらが参考になるのではないでしょうか。
簡単に画面いっぱいの縦スクロールページが作れるScrollifyの使い方 | 東京上野のWeb制作会社LIG

投稿2019/09/21 05:28

Lhankor_Mhy

総合スコア36928

us_k

2019/09/21 08:01

オプションのbeforeを使うことで、スクロールに応じてヘッダーが表示されました！ありがとうございます。 before:function() { $('header').animate( { height: 'show' }, 200 );} しかしトップに戻ったときに表示させない方法はありますでしょうか？ beforeにJSの最初の項目を入力しましたがうまくいきませんでした。

Lhankor_Mhy

2019/09/21 08:21

LIGさんの記事に before:function(index, section) { というコードがあったかと思います。ドキュメントに Arguments include the index of the section and an array of all section elements. （引数はセクションのインデックスと全てのセクションの配列を受けます）とあるとおり、表示されるセクション番号がindexに入っていると思います。なので、beforeのコールバック関数の中で、indexの値で場合わけすればいいのではないでしょうか。

us_k

2019/09/21 14:29

indexの値で場合分けで実装することができました。この度は大変勉強になりました。

us_k

2019/09/21 14:42

何度も申し訳ございません。Scrollifyの動作の後にアニメーションをさせることができましたが、ドロワーメニューを表示させた後にスクロールするとアニメーションが2回動作してしまいます。ヘッダーが一度表示されてから非表示になり、また表示されるといった具合です。これはどのような原因が考えられるでしょうか？

Lhankor_Mhy

2019/09/24 00:36

遅くなってすみません。推測ですが、jQueryのエフェクトはキューに積まれるので、・ドロワーを閉じた時のメニュー非表示・セクション移動時のメニュー表示の順番で処理されているのだと思います。解決方法は、2つあると思います。・ドロワーを閉じた時のメニュー非表示処理を条件分岐させる・セクション移動時のメニュー表示エフェクトの前に、実行中のエフェクトを止めてしまう（ https://api.jquery.com/stop/ ）参考になれば幸いです。

行動規範の内容に同意します