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

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

新規登録して質問してみよう
ただいま回答率
86.12%
SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

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

ZRS
question

総合スコア1

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

1リアクション

0クリップ

320閲覧

投稿2022/10/04 00:37

編集2022/10/04 05:44

前提

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

実現したいこと

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

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

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

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

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

該当のソースコード

PHP

<!-- トップページのコード --> ... <header class="header"> <?php get_template_part('./template-parts/global-menu') ?> </header> <main> <section class="top"> <!-- トップセクションのコンテンツ --> </section> <section class="news" id="news"> <!-- ニュースセクションのコンテンツ --> </section> ...

PHP

<!-- サブページのコード --> ... <header class="header"> <?php get_template_part('./template-parts/global-menu') ?> </header> <main> <section class="sub__content"> <!-- サブページのコンテンツ --> </section> ...

PHP

<!-- グローバルメニューテンプレートパーツのコード --> <div class="global-menu <?php if (!is_home() && !is_front_page()) { echo 'is-show'; } ?>" id="global-menu"> <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> <?php // トップメニューを動的に表示する wp_nav_menu( array( 'theme_location' => 'top', //トップメニューをここに表示すると指定 'container' => 'nav', 'container_class' => 'top-nav', 'menu_class' => 'top-nav__list', ) ); ?> </div>

JavaScript

//初期位置初期化、スクロール位置初期化 var startPos = 0; var winScrollTop = 0; var global_menu = document.getElementById("global-menu"); // グローバルメニューを出現(トップページ) // グローバルメニュー上スクロールフェードアウト、下スクロールフェードイン window.addEventListener("scroll", function () { //現在のスクロール位置を取得 winScrollTop = window.pageYOffset; //ニュースセクションの取得 var news = document.getElementById("news"); // ニュースセクションが存在 if (news != null) { // ニュースセクションの位置を取得、初期位置にセット news_offset = window.pageYOffset + news.getBoundingClientRect().top; startPos = news_offset; } //スクロール位置が初期位置以上の場合、フェードイン if (winScrollTop > startPos) { global_menu.classList.add("is-show"); } //スクロール位置が0かつトップページ以外の場合、フェードイン else if (winScrollTop == 0 && news == null) { global_menu.classList.add("is-show"); } //それ以外はフェードアウト else { global_menu.classList.remove("is-show"); } //初期位置にスクロール位置を代入 startPos = winScrollTop; });

css

.global-menu { position: fixed; top: 0; left: 0; z-index: 2; width: 100%; height: 100px; margin-left: auto; background: rgba(#fff, 0.9); align-items: center; display: flex; opacity: 0; visibility: hidden; padding: 20px 60px; transition: opacity 0.5s, visibility 0.5s, transform 0.5s; &.is-show { opacity: 1; visibility: visible; } }

試したこと

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

Cocode👍を押しています

以下のような質問にはリアクションをつけましょう

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

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

2022/10/04 03:13依頼された後にこの質問は修正されています

こちらの質問が他のユーザーから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました。

hatena19

2022/10/04 01:39

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

2022/10/04 02:22

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

2022/10/04 03:33

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

2022/10/04 03:58

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

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。