質問編集履歴

3

試したコード③を追加

2018/12/30 06:42

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -212,6 +212,50 @@
212
212
 
213
213
  ```
214
214
 
215
+ ```jQuery
216
+
217
+ //試したコード③
218
+
219
+ //news.htmlはトップページではない別ページです。
220
+
221
+ $(function(){
222
+
223
+      var gnav=$('#gnav-menu');
224
+
225
+      var url=location.href
226
+
227
+     $(window).on('load scroll',function(){
228
+
229
+     if(url=="index.html"){
230
+
231
+      gnav.hide();
232
+
233
+      if($(this).scrollTop()>position){
234
+
235
+     gnav.fadeIn(500);
236
+
237
+    }else{
238
+
239
+     gnav.fadeOut(500);
240
+
241
+    }
242
+
243
+     }else{
244
+
245
+      gnav.show();
246
+
247
+      }
248
+
249
+     });
250
+
251
+ });
252
+
253
+ //結果:トップページでも次ページでもナビゲーションが表示されたままです。
254
+
255
+     //最後のgnav.show();はよくわからずつけています。
256
+
257
+ ```
258
+
215
259
 
216
260
 
217
261
 

2

誤字の修正

2018/12/30 06:42

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -38,7 +38,7 @@
38
38
 
39
39
  <li>
40
40
 
41
- <a href="cafe.html">HOME</a>
41
+ <a href="index.html">HOME</a>
42
42
 
43
43
  </li>
44
44
 
@@ -56,7 +56,7 @@
56
56
 
57
57
  <li>
58
58
 
59
- <a href="cafe.html#access">ACCESS</a>
59
+ <a href="index.html#access">ACCESS</a>
60
60
 
61
61
  </li>
62
62
 

1

HTMLとjQueryを省略してないものに変更し、試したコードを追記をしました。

2018/12/30 06:24

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -26,41 +26,47 @@
26
26
 
27
27
  ```HTML
28
28
 
29
+     <!--省略なし-->
30
+
29
-     <nav>
31
+ <header>
32
+
33
+ <nav id="gnav-menu">
30
34
 
31
35
  <div class="nav-wrap">
32
36
 
33
- <ul>
37
+ <ul>
34
-
38
+
35
-  <li>
39
+ <li>
36
-
40
+
37
- <a href="index.html">HOME</a>
41
+ <a href="cafe.html">HOME</a>
38
-
42
+
39
-  </li>
43
+ </li>
40
-
44
+
41
-  <li>
45
+ <li>
42
46
 
43
47
  <a href="news.html#news">NEWS</a>
44
48
 
45
-  </li>
49
+ </li>
46
-
50
+
47
-  <li>
51
+ <li>
48
52
 
49
53
  <a href="menu.html#menu">MENU</a>
50
54
 
51
-   </li>
55
+ </li>
52
-
56
+
53
-   <li>
57
+ <li>
54
-
58
+
55
- <a href="index.html#access">ACCESS</a>
59
+ <a href="cafe.html#access">ACCESS</a>
56
-
60
+
57
-   </li>
61
+ </li>
58
-
62
+
59
-  </ul>
63
+ </ul>
60
-
64
+
61
-  </div>
65
+ </div>
62
-
66
+
63
- </nav>
67
+ </nav>
68
+
69
+ </header>
64
70
 
65
71
  ```
66
72
 
@@ -108,29 +114,105 @@
108
114
 
109
115
  ```jQuery
110
116
 
117
+ //省略なし
118
+
119
+ $(function(){
120
+
121
+      var gnav=$('#gnav-menu');
122
+
111
- nav.hide();
123
+      gnav.hide();
112
-
124
+
113
- var position=$('#news').offset().top;
125
+      var position=$('#news').offset().top;
114
-
115
-
116
-
126
+
127
+
128
+
117
- $(window).on('load scroll',function(){
129
+     $(window).on('load scroll',function(){
130
+
118
-
131
+       var url=location.href;
132
+
119
- if($(this).scrollTop()>position){
133
+       if($(this).scrollTop()>position){
120
-
134
+
121
- nav.fadeIn(500);
135
+       gnav.fadeIn(500);
122
-
136
+
123
- }else{
137
+        }else{
124
-
138
+
125
- nav.fadeOut(500);
139
+       gnav.fadeOut(500);
126
-
140
+
127
- }
141
+        }
128
-
142
+
129
- });
143
+         });
144
+
130
-
145
+ });
146
+
147
+ ```
148
+
149
+ ```jQuery
150
+
151
+ //試したコード①
152
+
153
+ //CSSで#gnav-menu{display:none};にした状態で、
154
+
155
+ //news.htmlはトップページではない別ページです。
156
+
157
+ $(function(){
158
+
159
+      var gnav=$('#gnav-menu');
160
+
161
+      $(window).on('load scroll',function(){
162
+
163
+      var url=location.href
164
+
165
+     if(url=="news.html"){
166
+
167
+     gnav.css('display','block');
168
+
131
- }
169
+      }
170
+
132
-
171
+      });
172
+
173
+ });
174
+
175
+ //結果:トップページのindex.htmlでも次ページのnews.htmlでもナビゲーションが表示されないままです
176
+
133
- ```
177
+ ```
178
+
179
+ ```jQuery
180
+
181
+ //試したコード②
182
+
183
+ //news.htmlはトップページではない別ページです。
184
+
185
+ $(function(){
186
+
187
+      var gnav=$('#gnav-menu');
188
+
189
+      var url=location.href
190
+
191
+
192
+
193
+      $(window).on('load scroll',function(){
194
+
195
+     if($(this).scrollTop()>position && url=="index.html"){
196
+
197
+     gnav.fadeIn(500);
198
+
199
+     }else{
200
+
201
+       gnav.fadeOut(500);
202
+
203
+        }
204
+
205
+      });
206
+
207
+ });
208
+
209
+ //結果:エラーでjQuery自体が反応しない。
210
+
211
+     //&&url=="index.html"部分にエラーが出ていますが、何が間違いかわかりません。
212
+
213
+ ```
214
+
215
+
134
216
 
135
217
 
136
218