質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.36%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,602

score 6

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

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

実現させたいこと

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

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

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

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

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

発生している問題

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

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

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

該当のソースコード

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

<body>
  <a href="#" id="openMenu"><i class="fas fa-bars"></i></a>
  <a href="#" id="closeMenu"><i class="fas fa-times"></i></a>

  <header> 
  <div class="header-inner">
    <img src="/img/logo.png" alt="">
    <div class="header-right">
      <div class="reservation">
        <div class="reservation-text">
        <a href=""><p>予約  <i class="fas fa-couch"></i></p></a>
        </div>
      </div>
  </div>
  </div>
  </header>
    <div class="nav-wrapper"> //ドロワーメニュー
        <div class="gnav">
          <ul>
            <li></li>
            <li></li>
          </ul>
        </div>
      </div>

  <div class="swiper-container section"> 
    <div class="swiper-wrapper">
      <img src="/img/logo.png" alt="">
      <div class="swiper-slide"><div class="slide-img slide1"></div></div>
      <div class="swiper-slide"><div class="slide-img slide2"></div></div>
      <div class="swiper-slide"><div class="slide-img slide3"></div></div>
    </div>
  </div>

  <div id="first-view" class="section">
    <div class="text-wrapper">
      <h1>林間学校、覚えていますか?</h1>
    </div>
  </div>
header{
  display: none;
  position: fixed;
  height: 60px;
  top:0;
  z-index: 20;
  &::after {
    content:'';
    display:block;
    }
}

#openMenu{
  position: fixed;
  top:2%;
  left: 2%;
  color: $light-green;
  z-index: 9999;
}
#closeMenu{
  position: fixed;
  top:2%;
  left: 2%;
  color:$light-green;
  z-index: 9999;
  display: none;
}
.nav-wrapper{
  display: none;
  position: absolute;
  background-color: $green;
  width: 50%;
  height: 100%;
  z-index: 10;
}
$(function(){

  $(document).scroll(function () {
    var s = $(this).scrollTop();
    var m = 30; 
    if(s > m) { 
    $("header").slideDown('slow');
    } else if(s < m) { 
    $("header").slideUp('slow');
    }
    });


  $('#openMenu').click(function(){
    $('.nav-wrapper').animate( { width: 'show' }, 200 );
    $('header').animate( { height: 'show' }, 200 );
    $('#openMenu').fadeOut();
    $('#closeMenu').fadeIn();
    $('body,html').css({"overflow":"hidden","height":"100%"});
    $('.nav-bottom').css('left', '0')
  });
  $('#closeMenu').click(function(){
    $('body,html').css({"overflow":"visible","height":"100%"});
    $('#openMenu').fadeIn();
    $('#closeMenu').fadeOut();
    $('header').animate( { height: 'hide' },{
      duration: 20,
      queue: false,
      });
    $('.nav-wrapper').animate( { width: 'hide' }, 100 );
  });

  $.scrollify({
    section : ".section",
    interstitialSection : "",
    easing: "easeOutExpo",
    scrollSpeed: 1100,
    offset : 0,
    standardScrollElements: "#main",
    setHeights: true,
    overflowScroll: false,
    updateHash: false,
    touchScroll:true,
    before:function() {},
    after:function() {},
    afterResize:function() {},
    afterRender:function() {}

  });

});

試したこと

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

補足

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2019/09/21 13:59

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

    キャンセル

  • us_k

    2019/09/21 14:19

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

    キャンセル

  • Lhankor_Mhy

    2019/09/21 14:22 編集

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

    キャンセル

回答 1

checkベストアンサー

+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 23:29

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

    キャンセル

  • 2019/09/21 23:42

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

    キャンセル

  • 2019/09/24 09:36

    遅くなってすみません。
    推測ですが、jQueryのエフェクトはキューに積まれるので、
    ・ドロワーを閉じた時のメニュー非表示
    ・セクション移動時のメニュー表示
    の順番で処理されているのだと思います。

    解決方法は、2つあると思います。
    ・ドロワーを閉じた時のメニュー非表示処理を条件分岐させる
    ・セクション移動時のメニュー表示エフェクトの前に、実行中のエフェクトを止めてしまう( https://api.jquery.com/stop/

    参考になれば幸いです。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る