スクロールイベントの実装

前提

ホームページ(WordPress)にてJavaScriptを使用し、固定グローバルメニューにスクロールイベントの実装をしています。
上スクロールフェードイン、下スクロールフェードアウトのイベントと
サブページでは最初からフェードインしトップページでは最初はフェードインせず、
トップページにのみ存在するNEWSのセクションでフェードインするイベントの組み合わせが実現できず困っております。
is-showというクラスを付与してフェードイン、外してフェードアウトの制御を行っております。

実現したいこと

グローバルメニューでの実現したい動きは以下です。

サブページ
読み込み直後　表示
上スクロール時　フェードアウトして非表示
下スクロール時　フェードインして表示

トップページ
読み込み直後　非表示
下スクロールでNewsセクションが画面Topまできたら　フェードインして表示
上スクロールでNewsセクションが画面Topまできたら　フェードアウトして非表示
Newsセクション以降下スクロール　フェードインして表示
Newsセクション以降上スクロール　フェードアウトして非表示

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

個々のイベントについては実装できるが、
複数の条件が重なる場合の分岐、条件の設定、書き方がわからない。

該当のソースコード

PHP
1<!-- トップページのコード -->
2...
3<header class="header">
4    <?php get_template_part('./template-parts/global-menu') ?>
5</header>
6
7<main>
8
9<section class="top">
10<!-- トップセクションのコンテンツ -->
11</section>
12
13<section class="news" id="news">
14<!-- ニュースセクションのコンテンツ -->
15</section>
16...

PHP
1<!-- サブページのコード -->
2...
3<header class="header">
4    <?php get_template_part('./template-parts/global-menu') ?>
5</header>
6
7<main>
8
9<section class="sub__content">
10<!-- サブページのコンテンツ -->
11</section>
12...

PHP
1<!-- グローバルメニューテンプレートパーツのコード -->
2<div class="global-menu <?php if (!is_home() && !is_front_page()) {
3                          echo 'is-show';
4                        } ?>" id="global-menu">
5  <a href=" <?php echo esc_url(home_url('/')); ?>"><img class="top-menu__img" src="<?php echo get_template_directory_uri() ?>/img/header_logo.png" alt="<?php bloginfo('name') ?>"></a>
6  <?php
7  // トップメニューを動的に表示する
8  wp_nav_menu(
9    array(
10      'theme_location' => 'top', //トップメニューをここに表示すると指定
11      'container' => 'nav',
12      'container_class' => 'top-nav',
13      'menu_class' => 'top-nav__list',
14    )
15  );
16  ?>
17</div>

JavaScript
1//初期位置初期化、スクロール位置初期化
2var startPos = 0;
3var winScrollTop = 0;
4
5var global_menu = document.getElementById("global-menu");
6
7// グローバルメニューを出現(トップページ)
8// グローバルメニュー上スクロールフェードアウト、下スクロールフェードイン
9window.addEventListener("scroll", function () {
10  //現在のスクロール位置を取得
11  winScrollTop = window.pageYOffset;
12
13  //ニュースセクションの取得
14  var news = document.getElementById("news");
15
16  // ニュースセクションが存在
17  if (news != null) {
18    // ニュースセクションの位置を取得、初期位置にセット
19    news_offset = window.pageYOffset + news.getBoundingClientRect().top;
20    startPos = news_offset;
21  }
22
23  //スクロール位置が初期位置以上の場合、フェードイン
24  if (winScrollTop > startPos) {
25    global_menu.classList.add("is-show");
26  }
27
28  //スクロール位置が0かつトップページ以外の場合、フェードイン
29  else if (winScrollTop == 0 && news == null) {
30    global_menu.classList.add("is-show");
31  }
32  //それ以外はフェードアウト
33  else {
34    global_menu.classList.remove("is-show");
35  }
36  //初期位置にスクロール位置を代入
37  startPos = winScrollTop;
38});

css
1.global-menu {
2  position: fixed;
3  top: 0;
4  left: 0;
5  z-index: 2;
6  width: 100%;
7  height: 100px;
8  margin-left: auto;
9  background: rgba(#fff, 0.9);
10  align-items: center;
11  display: flex;
12  opacity: 0;
13  visibility: hidden;
14  padding: 20px 60px;
15  transition: opacity 0.5s, visibility 0.5s, transform 0.5s;
16
17  &.is-show {
18    opacity: 1;
19    visibility: visible;
20   }
21}

試したこと

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

hatena19

2022/10/04 01:39

トップページとサブページとはURL自体が異なる別のページですか。それともURL自体は同じでJSで動的に変更しているのでしょうか。あと、トップページとサブページのHTMLコードも提示してください。

question

2022/10/04 02:22

失礼しました。現在ワードプレスにてページを作成しており、トップページとサブページはURLが異なります。トップページはpage-home.phpという名前で、それ以外のサブページはpage.phpで作成しています。トップぺージとサブページの明確な違いはnewsセクションが存在するかしないかです。それぞれに対しテンプレートパーツでグローバルメニューを配置しております。ソースコードについては追記するので、お待ちください。

hatena19

2022/10/04 03:33

動作仕様がよくわからないのですが、もう少し詳しい説明を質問に追記てしもらえませんか。下記のように状況ごとに箇条書きで説明してもらえるとわかりやすいです。サブページ読み込み直後　表示下スクロール時　フェードアウトして非表示上スクロール時　フェードインして表示トップページ読み込み直後　非表示下スクロールでNewsセクションが画面Topまできたらフェードインして表示さらに下スクロール　？上スクロールでNewsセクションが画面Topまできたら？ Newsセクションが画面Top位置からさらに上スクロール？

question

2022/10/04 03:58

実現したいことに動作仕様について修正しました。ご確認お願いします。

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

回答1件

ベストアンサー

動作仕様はトップページとサブページではまったく異なります。
トップページかそうでないかは、NEWSセクションがあるかないかで切り分けられます。
これを条件にif文でトップページの場合とサブページの場合を切り分ければいいでしょう。

読み込み直後は、トップページは非表示、サブページは表示ですが、これは、
グローバルメニューテンプレートパーツのPHPコードで、サブページ場合は is-show を付加しているのでJSでの処理は不要ですね。

あとは、
トップページなら、ニュースセクションが画面トップより上なら表示そうでないなら非表示
サブページなら、上スクロール時は表示、下スクロール時は非表示
でご希望の動作仕様になると思います。

JavaScript
1//初期位置初期化、スクロール位置初期化
2var startPos = 0;
3var winScrollTop = 0;
4var global_menu = document.getElementById("global-menu");
5
6// グローバルメニューを出現(トップページ)
7// グローバルメニュー上スクロールフェードアウト、下スクロールフェードイン
8window.addEventListener("scroll", function () {
9    //現在のスクロール位置を取得
10    winScrollTop = window.pageYOffset;
11
12    //ニュースセクションの取得
13    var news = document.getElementById("news");
14
15    // ニュースセクションが存在(トップページ)
16    if (news != null) {
17        // ニュースセクションが画面トップより上なら表示
18        if (news.getBoundingClientRect().top < 0) {
19            global_menu.classList.add("is-show");
20        } else {
21            global_menu.classList.remove("is-show");
22        }
23    } else {
24        // ニュースセクションがない(サブページ)
25        if (winScrollTop < startPos) {
26            //上スクロール時は表示
27            global_menu.classList.add("is-show");
28        }
29        else {
30            //下スクロール時は非表示
31            global_menu.classList.remove("is-show");
32        }
33    }
34    //初期位置にスクロール位置を代入
35    startPos = winScrollTop;
36});

投稿2022/10/04 05:07

hatena19

総合スコア33782

question

2022/10/04 05:43

申し訳ありません。こちらのコードを適用して動作確認してみたのですが、サブページの場合はOKでトップページの場合の Newsセクション以降下スクロール　フェードインして表示 Newsセクション以降上スクロール　フェードアウトして非表示の動きができていませんでした。仕様がややこしくて伝わらず申し訳ありません。