質問編集履歴

1

確認ブラウザの追加、タグ追加しました。

2017/01/19 03:05

投稿

rayco
rayco

スコア11

test CHANGED
File without changes
test CHANGED
@@ -1,319 +1,321 @@
1
+ ###前提・実現したいこと
2
+
3
+ 実現したいこと:
4
+
5
+ ・上下スクロール時に複数設定したsectionのトリガー到達時に合致するサイドメニューを切り替える。
6
+
7
+ ・対象コンテンツを過ぎたらサイドメニューは隠す。
8
+
9
+
10
+
11
+ 前提:
12
+
13
+ ・フル画面ページではない。
14
+
15
+ ・sectionは縦並びで9個、うちサイドメニュー対象は上部5個。
16
+
17
+ ・スクロールを戻すとサイドメニューの内容も戻る。
18
+
19
+ ・サイドメニューはz-indexなどで重ねsectionと合致する内容のみ表示する。
20
+
21
+ ・レスポンシブ対応(※スマホ・タブレット時はサイドメニューは非表示)
22
+
23
+ ・サイドメニューは上部固定。
24
+
25
+
26
+
27
+ 近い動作をするサイト
28
+
29
+ http://springsummer.dk/
30
+
31
+
32
+
33
+ ###発生している問題
34
+
35
+ トリガー前にサイドメニューが切り替わる、もしくはトリガーを超えてから切り替わってしまう。
36
+
37
+ サイドメニュー対象外のエリアに入ってもサイドメニューが消えない。
38
+
39
+
40
+
41
+ ###該当のソースコード
42
+
43
+ HTML
44
+
45
+ ```
46
+
47
+ <!DOCTYPE html>
48
+
49
+ <html lang="ja">
50
+
51
+ <head>
52
+
53
+ <meta charset="utf-8">
54
+
55
+ <meta name="format-detection" content="telephone=no">
56
+
57
+ <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
58
+
59
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
60
+
61
+ <script src="js/jquery.bxslider.min.js"></script>
62
+
63
+ <script>
64
+
65
+ $(function() {
66
+
67
+ // 引き金となる要素を設定
68
+
69
+ var triggerNode = $(".trigger");
70
+
71
+ // 画面スクロール毎に判定を行う
72
+
73
+ $(window).scroll(function(){
74
+
75
+ // 引き金となる要素の位置を取得
76
+
77
+ var triggerNodePosition = $(triggerNode).offset().top - $(window).height();
78
+
79
+ // 現在のスクロール位置が引き金要素の位置より下にあれば‥
80
+
81
+ if ($(window).scrollTop() > triggerNodePosition) {
82
+
83
+ // なんらかの命令を実行
84
+
85
+ $('#sidenav').addClass('on');
86
+
87
+ }
88
+
89
+ });
90
+
91
+ });
92
+
93
+
94
+
95
+ $(function(){
96
+
97
+ var margin = -250,
98
+
99
+ sectionTop = new Array,
100
+
101
+ current = -1;
102
+
103
+ $('.trigger').each(function(i) {
104
+
105
+ sectionTop[i] = $(this).offset().top;
106
+
107
+ });
108
+
109
+ $('#sidenav').append('<div id="#current"></div>'); //create #current
110
+
111
+ changeNavCurrent(0);
112
+
113
+
114
+
115
+ $(window).scroll(function(){
116
+
117
+ scrollY = $(window).scrollTop();
118
+
119
+
120
+
121
+ for (var i = sectionTop.length - 1 ; i >= 0; i--) {
122
+
123
+ if (scrollY > sectionTop[i] - margin) {
124
+
125
+ changeNavCurrent(i);
126
+
127
+ break;
128
+
129
+ }
130
+
131
+ };
132
+
133
+ });
134
+
135
+ //ナビの処理
136
+
137
+ function changeNavCurrent(curNum) {
138
+
139
+ if (curNum != current) {
140
+
141
+ current = curNum;
142
+
143
+ curNum2 = curNum + 1;
144
+
145
+ $('#sidenav li').removeClass('on');
146
+
147
+ $('#sidenav li:nth-child(' + curNum2 +')').addClass('on');
148
+
149
+ /* 位置によって個別に処理をしたい場合
150
+
151
+ if (current == 0) {
152
+
153
+ // 現在地がsection1の場合の処理
154
+
155
+ } else if (current == 1) {
156
+
157
+ // 現在地がsection2の場合の処理
158
+
159
+ } else if (current == 2) {
160
+
161
+ // 現在地がsection3の場合の処理
162
+
163
+ }*/
164
+
165
+ }
166
+
167
+ };
168
+
169
+ });
170
+
171
+
172
+
173
+ $(function(){
174
+
175
+ $(window).scroll(function(){
176
+
177
+ var obj_t_pos = $('#moreContents').offset().top;
178
+
179
+ var scr_count = $(document).scrollTop() + (window.innerHeight/2); // ディスプレイの半分の高さを追加
180
+
181
+ if(scr_count > obj_t_pos){
182
+
183
+ $('#sidenav').addClass('cle');
184
+
185
+ }else{
186
+
187
+ $('#sidenav').removeClass('cle');
188
+
189
+ }
190
+
191
+ })
192
+
193
+ });
194
+
195
+ </script>
196
+
197
+ </head>
198
+
199
+ <body>
200
+
201
+ <div id="Contents">
202
+
203
+ <div id="Main">
204
+
205
+ <div id="mainContents">
206
+
207
+ <div class="trigger" id="section01">
208
+
209
+ 内容1:スライダー(bxslider)
210
+
211
+ </div>
212
+
213
+ <div class="trigger" id="section02">
214
+
215
+ 内容2
216
+
217
+ </div>
218
+
219
+ <div class="trigger" id="section03">
220
+
221
+ 内容3
222
+
223
+ </div>
224
+
225
+ <div class="trigger" id="section04">
226
+
227
+ 内容4
228
+
229
+ </div>
230
+
231
+ <div class="trigger" id="section05">
232
+
233
+ 内容5
234
+
235
+ </div>
236
+
237
+ </div>
238
+
239
+
240
+
241
+ <div id="moreContents">
242
+
243
+ <div class="otherContents" id="sub01">
244
+
245
+ 内容6
246
+
247
+ </div>
248
+
249
+
250
+
251
+ <div class="otherContents" id="sub02">
252
+
253
+ 内容7
254
+
255
+ </div>
256
+
257
+
258
+
259
+ <div class="otherContents" id="sub03">
260
+
261
+ 内容8
262
+
263
+ </div>
264
+
265
+
266
+
267
+ <div class="otherContents" id="sub04">
268
+
269
+ 内容9
270
+
271
+ </div>
272
+
273
+ </div>
274
+
275
+
276
+
277
+ <ul id="sidenav">
278
+
279
+ <li><a href="#section01">内容1タイトル</a></li>
280
+
281
+ <li><a href="#section02">内容2タイトル</a></li>
282
+
283
+ <li><a href="#section03">内容3タイトル</a></li>
284
+
285
+ <li><a href="#section04">内容4タイトル</a></li>
286
+
287
+ <li><a href="#section05">内容5タイトル</a></li>
288
+
289
+ </ul>
290
+
291
+ </div>
292
+
293
+ </div>
294
+
295
+ </body>
296
+
297
+ </html>
298
+
299
+
300
+
301
+ ```
302
+
303
+
304
+
305
+
306
+
307
+ ###試したこと
308
+
309
+ ソースの書き換え、他のプラグインの使用など
310
+
311
+ 複数ブラウザでの動作確認(IE、Firefox、Chrome)
312
+
313
+
314
+
315
+
316
+
1
317
  初めまして、Webページを作成していて、どうしても解決できないのでお力添えをいただければと思います。
2
318
 
3
319
  プラグインや、ネットに掲載されているソースをほんの少し触る程度の実力です。
4
320
 
5
321
  よろしくお願いいたします。
6
-
7
-
8
-
9
- ###前提・実現したいこと
10
-
11
- 実現したいこと:
12
-
13
- ・上下スクロール時に複数設定したsectionのトリガー到達時に合致するサイドメニューを切り替える。
14
-
15
- ・対象コンテンツを過ぎたらサイドメニューは隠す。
16
-
17
-
18
-
19
- 前提:
20
-
21
- ・フル画面ページではない。
22
-
23
- ・sectionは縦並びで9個、うちサイドメニュー対象は上部5個。
24
-
25
- ・スクロールを戻すとサイドメニューの内容も戻る。
26
-
27
- ・サイドメニューはz-indexなどで重ねsectionと合致する内容のみ表示する。
28
-
29
- ・レスポンシブ対応(※スマホ・タブレット時はサイドメニューは非表示)
30
-
31
- ・サイドメニューは上部固定。
32
-
33
-
34
-
35
- 近い動作をするサイト
36
-
37
- http://springsummer.dk/
38
-
39
-
40
-
41
- ###発生している問題
42
-
43
- トリガー前にサイドメニューが切り替わる、もしくはトリガーを超えてから切り替わってしまう。
44
-
45
- サイドメニュー対象外のエリアに入ってもサイドメニューが消えない。
46
-
47
-
48
-
49
- ###該当のソースコード
50
-
51
- HTML
52
-
53
- ```
54
-
55
- <!DOCTYPE html>
56
-
57
- <html lang="ja">
58
-
59
- <head>
60
-
61
- <meta charset="utf-8">
62
-
63
- <meta name="format-detection" content="telephone=no">
64
-
65
- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
66
-
67
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
68
-
69
- <script src="js/jquery.bxslider.min.js"></script>
70
-
71
- <script>
72
-
73
- $(function() {
74
-
75
- // 引き金となる要素を設定
76
-
77
- var triggerNode = $(".trigger");
78
-
79
- // 画面スクロール毎に判定を行う
80
-
81
- $(window).scroll(function(){
82
-
83
- // 引き金となる要素の位置を取得
84
-
85
- var triggerNodePosition = $(triggerNode).offset().top - $(window).height();
86
-
87
- // 現在のスクロール位置が引き金要素の位置より下にあれば‥
88
-
89
- if ($(window).scrollTop() > triggerNodePosition) {
90
-
91
- // なんらかの命令を実行
92
-
93
- $('#sidenav').addClass('on');
94
-
95
- }
96
-
97
- });
98
-
99
- });
100
-
101
-
102
-
103
- $(function(){
104
-
105
- var margin = -250,
106
-
107
- sectionTop = new Array,
108
-
109
- current = -1;
110
-
111
- $('.trigger').each(function(i) {
112
-
113
- sectionTop[i] = $(this).offset().top;
114
-
115
- });
116
-
117
- $('#sidenav').append('<div id="#current"></div>'); //create #current
118
-
119
- changeNavCurrent(0);
120
-
121
-
122
-
123
- $(window).scroll(function(){
124
-
125
- scrollY = $(window).scrollTop();
126
-
127
-
128
-
129
- for (var i = sectionTop.length - 1 ; i >= 0; i--) {
130
-
131
- if (scrollY > sectionTop[i] - margin) {
132
-
133
- changeNavCurrent(i);
134
-
135
- break;
136
-
137
- }
138
-
139
- };
140
-
141
- });
142
-
143
- //ナビの処理
144
-
145
- function changeNavCurrent(curNum) {
146
-
147
- if (curNum != current) {
148
-
149
- current = curNum;
150
-
151
- curNum2 = curNum + 1;
152
-
153
- $('#sidenav li').removeClass('on');
154
-
155
- $('#sidenav li:nth-child(' + curNum2 +')').addClass('on');
156
-
157
- /* 位置によって個別に処理をしたい場合
158
-
159
- if (current == 0) {
160
-
161
- // 現在地がsection1の場合の処理
162
-
163
- } else if (current == 1) {
164
-
165
- // 現在地がsection2の場合の処理
166
-
167
- } else if (current == 2) {
168
-
169
- // 現在地がsection3の場合の処理
170
-
171
- }*/
172
-
173
- }
174
-
175
- };
176
-
177
- });
178
-
179
-
180
-
181
- $(function(){
182
-
183
- $(window).scroll(function(){
184
-
185
- var obj_t_pos = $('#moreContents').offset().top;
186
-
187
- var scr_count = $(document).scrollTop() + (window.innerHeight/2); // ディスプレイの半分の高さを追加
188
-
189
- if(scr_count > obj_t_pos){
190
-
191
- $('#sidenav').addClass('cle');
192
-
193
- }else{
194
-
195
- $('#sidenav').removeClass('cle');
196
-
197
- }
198
-
199
- })
200
-
201
- });
202
-
203
- </script>
204
-
205
- </head>
206
-
207
- <body>
208
-
209
- <div id="Contents">
210
-
211
- <div id="Main">
212
-
213
- <div id="mainContents">
214
-
215
- <div class="trigger" id="section01">
216
-
217
- 内容1:スライダー(bxslider)
218
-
219
- </div>
220
-
221
- <div class="trigger" id="section02">
222
-
223
- 内容2
224
-
225
- </div>
226
-
227
- <div class="trigger" id="section03">
228
-
229
- 内容3
230
-
231
- </div>
232
-
233
- <div class="trigger" id="section04">
234
-
235
- 内容4
236
-
237
- </div>
238
-
239
- <div class="trigger" id="section05">
240
-
241
- 内容5
242
-
243
- </div>
244
-
245
- </div>
246
-
247
-
248
-
249
- <div id="moreContents">
250
-
251
- <div class="otherContents" id="sub01">
252
-
253
- 内容6
254
-
255
- </div>
256
-
257
-
258
-
259
- <div class="otherContents" id="sub02">
260
-
261
- 内容7
262
-
263
- </div>
264
-
265
-
266
-
267
- <div class="otherContents" id="sub03">
268
-
269
- 内容8
270
-
271
- </div>
272
-
273
-
274
-
275
- <div class="otherContents" id="sub04">
276
-
277
- 内容9
278
-
279
- </div>
280
-
281
- </div>
282
-
283
-
284
-
285
- <ul id="sidenav">
286
-
287
- <li><a href="#section01">内容1タイトル</a></li>
288
-
289
- <li><a href="#section02">内容2タイトル</a></li>
290
-
291
- <li><a href="#section03">内容3タイトル</a></li>
292
-
293
- <li><a href="#section04">内容4タイトル</a></li>
294
-
295
- <li><a href="#section05">内容5タイトル</a></li>
296
-
297
- </ul>
298
-
299
- </div>
300
-
301
- </div>
302
-
303
- </body>
304
-
305
- </html>
306
-
307
-
308
-
309
- ```
310
-
311
-
312
-
313
-
314
-
315
- ###試したこと
316
-
317
- ソースの書き換え、他のプラグインの使用など
318
-
319
- 複数ブラウザでの動作確認