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

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

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

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

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

Q&A

解決済

1回答

6692閲覧

トップページのみに、jQueryを適用したい

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

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

0グッド

2クリップ

投稿2018/12/30 04:06

編集2018/12/30 06:42

前提・実現したいこと

複数ページあるwebサイトを作成中です。
ナビゲーションメニューを、トップページ:ある位置でfadeIn/fadeOutするように それ以外のページ:最初からtopに表示されたままにしたいと思っています。
トップページは思う通りの動きになったのですが、それ以外のページも同じ動きになってしまいます。特定のページにだけ適用する方法がうまくいかず、つまずいております。ご教示お願いします。

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

該当のソースコード

HTML

1    <!--省略なし--> 2 <header> 3 <nav id="gnav-menu"> 4 <div class="nav-wrap"> 5 <ul> 6 <li> 7 <a href="index.html">HOME</a> 8 </li> 9 <li> 10 <a href="news.html#news">NEWS</a> 11 </li> 12 <li> 13 <a href="menu.html#menu">MENU</a> 14 </li> 15 <li> 16 <a href="index.html#access">ACCESS</a> 17 </li> 18 </ul> 19 </div> 20 </nav> 21 </header>

CSS

1    nav{ 2 /*display:none;*/ 3    position:fixed; 4    top:0; 5    width:100%; 6    height:80px; 7    } 8    nav ul{ 9   display: flex; 10    align-items: center; 11    justify-content:center; 12    height:80px; 13    width:100%; 14    } 15     nav li a{ 16    cursor:pointer; 17    color:#000; 18    padding:0 40px; 19 }

jQuery

1 //省略なし 2 $(function(){ 3     var gnav=$('#gnav-menu'); 4     gnav.hide(); 5     var position=$('#news').offset().top; 6 7     $(window).on('load scroll',function(){ 8       var url=location.href; 9       if($(this).scrollTop()>position){ 10       gnav.fadeIn(500); 11        }else{ 12       gnav.fadeOut(500); 13        } 14         }); 15 });

jQuery

1 //試したコード① 2 //CSSで#gnav-menu{display:none};にした状態で、 3 //news.htmlはトップページではない別ページです。 4 $(function(){ 5     var gnav=$('#gnav-menu'); 6     $(window).on('load scroll',function(){ 7      var url=location.href 8     if(url=="news.html"){ 9     gnav.css('display','block'); 10      } 11     }); 12 }); 13 //結果:トップページのindex.htmlでも次ページのnews.htmlでもナビゲーションが表示されないままです

jQuery

1 //試したコード② 2 //news.htmlはトップページではない別ページです。 3 $(function(){ 4     var gnav=$('#gnav-menu'); 5     var url=location.href 6 7     $(window).on('load scroll',function(){ 8     if($(this).scrollTop()>position && url=="index.html"){ 9     gnav.fadeIn(500); 10     }else{ 11       gnav.fadeOut(500); 12        } 13     }); 14 }); 15 //結果:エラーでjQuery自体が反応しない。 16    //&&url=="index.html"部分にエラーが出ていますが、何が間違いかわかりません。

jQuery

1 //試したコード③ 2 //news.htmlはトップページではない別ページです。 3 $(function(){ 4     var gnav=$('#gnav-menu'); 5     var url=location.href 6    $(window).on('load scroll',function(){ 7     if(url=="index.html"){ 8      gnav.hide(); 9      if($(this).scrollTop()>position){ 10     gnav.fadeIn(500); 11    }else{ 12     gnav.fadeOut(500); 13    } 14     }else{ 15      gnav.show(); 16      } 17    }); 18 }); 19 //結果:トップページでも次ページでもナビゲーションが表示されたままです。 20    //最後のgnav.show();はよくわからずつけています。

試したこと

var url=location.hrefとif文を使用して、トップページのURL(index.html)の時だけ上記jQueryの処理をするようにしたいと思ったのですが、if文の中にif文を書く描き方もいまいちわからず、うまく反応しませんでした。

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

ここにより詳細な情報を記載してください。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/12/30 05:06

最初のアクセスがトップページ以外だった場合はどうするのでしょうか
退会済みユーザー

退会済みユーザー

2018/12/30 05:33

最初のアクセスがトップページ以外の場合は、topに表示したままにしたいです。(top:0の位置) というのも、トップページにファーストビューとして画像をスライダーとして表示しており、そこではスクロールした位置でナビゲーションをfadeInさせたく、それ以外のページにはスライダーを表示しないため ナビゲーションをあらかじめtopに表示させたいです。 わかりづらくて申し訳ないのですが、よろしくお願いします。
kei344

2018/12/30 05:36

提示されたJavaScriptのみではエラーが起きます。省略せずに提示することをお勧めします。また、試したほうのコードも提示してください。
guest

回答1

0

ベストアンサー

単純に、トップページのみを識別できるidとかclassをbody要素につけて、それを確認するようなコードにしてみてはいかがでしょうか。

HTML

1<body id="top"><!-- >略< --></body>

js

1if ( window.document.body.id === 'top' ) {}

投稿2018/12/30 15:22

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/12/30 23:15

早速の回答ありがとうございます。とても単純なことだったのですね!うまく思う通りの処理ができるようになりました。正直2日間ほどずっと解決できなかったので、とても助かりました。ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問