前提
ホームページ(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/ツールのバージョンなど)

回答1件
あなたの回答
tips
プレビュー