Q&A
最初のアクセスがトップページ以外だった場合はどうするのでしょうか
前提・実現したいこと
複数ページある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/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
最初のアクセスがトップページ以外の場合は、topに表示したままにしたいです。(top:0の位置)
というのも、トップページにファーストビューとして画像をスライダーとして表示しており、そこではスクロールした位置でナビゲーションをfadeInさせたく、それ以外のページにはスライダーを表示しないため ナビゲーションをあらかじめtopに表示させたいです。
わかりづらくて申し訳ないのですが、よろしくお願いします。
提示されたJavaScriptのみではエラーが起きます。省略せずに提示することをお勧めします。また、試したほうのコードも提示してください。
回答1件
0
ベストアンサー
単純に、トップページのみを識別できるidとかclassをbody要素につけて、それを確認するようなコードにしてみてはいかがでしょうか。
HTML
1<body id="top"><!-- >略< --></body>
js
1if ( window.document.body.id === 'top' ) {}
投稿2018/12/30 15:22
総合スコア69625
早速の回答ありがとうございます。とても単純なことだったのですね！うまく思う通りの処理ができるようになりました。正直２日間ほどずっと解決できなかったので、とても助かりました。ありがとうございます！
あなたの回答
tips
プレビュー
