質問編集履歴

5

追記

2016/10/31 06:14

投稿

lingwood
lingwood

スコア40

test CHANGED
File without changes
test CHANGED
@@ -747,3 +747,31 @@
747
747
  いろいろ頑張ってみたのですが、
748
748
 
749
749
  どんどん改悪してしまいました。
750
+
751
+
752
+
753
+ 【追記5】
754
+
755
+
756
+
757
+ すみません、こちらの件ですがどなた様か
758
+
759
+ ジャストで答えと簡単で良いので解説をご教示いただけないでしょうか。
760
+
761
+
762
+
763
+ ずっと解にたどり着くよう導いてきてくださいましたtimy様に
764
+
765
+ ご指南頂くのが本来ベストかと思いますが、
766
+
767
+
768
+
769
+ 人それぞれに多様な思想、思惑がおありだと思いますので、
770
+
771
+ 無理をお願いするのもと思いまして・・・
772
+
773
+
774
+
775
+ 本当に申し訳ございませんが、
776
+
777
+ 何卒よろしくお願い申し上げます。

4

追記

2016/10/31 06:14

投稿

lingwood
lingwood

スコア40

test CHANGED
File without changes
test CHANGED
@@ -465,3 +465,285 @@
465
465
 
466
466
 
467
467
  この書き方は正しい?のでしょうか?
468
+
469
+
470
+
471
+
472
+
473
+
474
+
475
+ 【追記 4】
476
+
477
+ ```
478
+
479
+ //書き直し
480
+
481
+
482
+
483
+
484
+
485
+ $(window).resize(function(){
486
+
487
+ var w = $(window).width();
488
+
489
+ var x = 768;
490
+
491
+
492
+
493
+ console.log( $(window).scrollTop(),$(window).width(),w);
494
+
495
+
496
+
497
+ if (x <= y) {
498
+
499
+ $('header').addClass('smaller');
500
+
501
+ } else if ( $(window).scrollTop() <= 300 ) {
502
+
503
+ $('header').removeClass('smaller');
504
+
505
+ } else {
506
+
507
+ $('header').removeClass('smaller');
508
+
509
+ }
510
+
511
+ });
512
+
513
+
514
+
515
+
516
+
517
+ $(window).scroll(function(){
518
+
519
+
520
+
521
+ console.log( $(window).scrollTop(),$(window).width(),sc);
522
+
523
+
524
+
525
+ var sc = $(window).scrollTop();
526
+
527
+ var h = 300;
528
+
529
+
530
+
531
+ if (h <= sc) {
532
+
533
+ $('header').addClass('smaller');
534
+
535
+ } else {
536
+
537
+ $('header').removeClass('smaller');
538
+
539
+ }
540
+
541
+ });
542
+
543
+
544
+
545
+
546
+
547
+
548
+
549
+ //ここまで
550
+
551
+
552
+
553
+
554
+
555
+ /*******************10/26ここまでダメ******************************/
556
+
557
+ /*
558
+
559
+ function init() {
560
+
561
+
562
+
563
+ var y = 300;
564
+
565
+ var x = 768;
566
+
567
+
568
+
569
+ console.log( $(window).scrollTop(),$(window).width());
570
+
571
+
572
+
573
+ window.addEventListener('scroll', function(e){
574
+
575
+
576
+
577
+ if ( $(window).scrollTop() > y ) {
578
+
579
+
580
+
581
+ $("header").addClass("smaller");
582
+
583
+
584
+
585
+ } else {
586
+
587
+
588
+
589
+ $("header").removeClass("smaller");
590
+
591
+
592
+
593
+ }
594
+
595
+ });
596
+
597
+
598
+
599
+
600
+
601
+ console.log( $(window).scrollTop(),$(window).width());
602
+
603
+
604
+
605
+ window.addEventListener('resize', function(e) {
606
+
607
+
608
+
609
+ if ( $(window).width() > x ) { //widthがx(768)より小さい
610
+
611
+
612
+
613
+ $("header").addClass("smaller");
614
+
615
+
616
+
617
+ } else {
618
+
619
+
620
+
621
+ $("header").removeClass("smaller");
622
+
623
+
624
+
625
+ }
626
+
627
+
628
+
629
+ });
630
+
631
+
632
+
633
+ }*/
634
+
635
+
636
+
637
+ window.onload = init();
638
+
639
+
640
+
641
+ /*
642
+
643
+ $("header").addClass("smaller");
644
+
645
+
646
+
647
+ } else if ( $(window).scrollTop() < y ) { //それ以外の時にheaderがsmallerを持っていたら外しましょう
648
+
649
+
650
+
651
+ $("header").removeClass("smaller");
652
+
653
+
654
+
655
+ } else if ( $(window).width() < x ) {
656
+
657
+
658
+
659
+ $("header").removeClass("smaller");
660
+
661
+
662
+
663
+ } else {
664
+
665
+
666
+
667
+ $("header").addClass("smaller");
668
+
669
+
670
+
671
+ }
672
+
673
+
674
+
675
+ });
676
+
677
+ console.log( $(window).scrollTop(),width);
678
+
679
+
680
+
681
+ /*window.addEventListener('resize', function(e){
682
+
683
+
684
+
685
+ if ( width < x ) { //widthがx(768)より小さい
686
+
687
+
688
+
689
+ $("header").removeClass("smaller");
690
+
691
+
692
+
693
+ } else if ( $(window).scrollTop() < y ) {
694
+
695
+
696
+
697
+ $("header").removeClass("smaller");
698
+
699
+
700
+
701
+ } else if ( $(window).width() < x ) {
702
+
703
+
704
+
705
+ $("header").addClass("smaller");
706
+
707
+
708
+
709
+ }
710
+
711
+ });
712
+
713
+ }
714
+
715
+ */
716
+
717
+ ```
718
+
719
+
720
+
721
+ いろいろと追記を変更してみました。
722
+
723
+ 追記4のように書き直してみまして良さそうだなと思ったのですが、
724
+
725
+
726
+
727
+ やっぱり768px以下の際にスクロールすると
728
+
729
+ headerにsmallerがついてしまいます。
730
+
731
+
732
+
733
+ このsmallerがつくと、ウィンドウがスクロールの際にカックンとなり、
734
+
735
+ ちょっとページ内リンクにいきなりとんだような動作をします。
736
+
737
+ そのため、メニューバーの表示にズレが生じるなど問題があります。
738
+
739
+
740
+
741
+ コンソールログも入れてみたのですが、
742
+
743
+ 良くわからなかったです。
744
+
745
+
746
+
747
+ いろいろ頑張ってみたのですが、
748
+
749
+ どんどん改悪してしまいました。

3

追記3

2016/10/27 01:29

投稿

lingwood
lingwood

スコア40

test CHANGED
File without changes
test CHANGED
@@ -250,7 +250,7 @@
250
250
 
251
251
 
252
252
 
253
- } else if ( $(window).scrollTop() < y ) { //それ以外の時にheaderがsmallerを持っていたら外しましょう
253
+ } else if ( $(window).scrollTop() < y ) {
254
254
 
255
255
 
256
256
 
@@ -348,6 +348,120 @@
348
348
 
349
349
  クラスが付与されません。
350
350
 
351
+ ③ウィンドウ枠768px以下でスクロールされた状態からウィンドウ幅を広げても
352
+
353
+ 元に戻らず → (つまりsmallが付与されていない?)
354
+
355
+ スクロールさせてあげなければならない。
356
+
351
357
 
352
358
 
353
359
  という状況になっております。
360
+
361
+
362
+
363
+ 【追記 3】
364
+
365
+
366
+
367
+ 次に以下の通りにしてみました。
368
+
369
+
370
+
371
+ ```
372
+
373
+ function init() {
374
+
375
+
376
+
377
+ var y = 300;
378
+
379
+ var x = 768;
380
+
381
+ var scroll = $(window).scrollTop();
382
+
383
+ var width = $(window).width();
384
+
385
+
386
+
387
+ window.addEventListener('scroll', function(e){
388
+
389
+
390
+
391
+ if ( scroll > y ) { //スクロール量がy(300)より大きい時
392
+
393
+ $("header").addClass("smaller");
394
+
395
+
396
+
397
+ } else if ( $(window).scrollTop() < y ) {
398
+
399
+
400
+
401
+ $("header").removeClass("smaller");
402
+
403
+
404
+
405
+ } else if ( $(window).width() < x ) {
406
+
407
+
408
+
409
+ $("header").removeClass("smaller");
410
+
411
+
412
+
413
+ } else if ( $(window).width() > x ) {
414
+
415
+
416
+
417
+ $("header").addClass("smaller");
418
+
419
+
420
+
421
+ }
422
+
423
+
424
+
425
+ });
426
+
427
+ }
428
+
429
+ window.onload = init();
430
+
431
+ ```
432
+
433
+
434
+
435
+ 【GOOD】
436
+
437
+ ①指定したスクロール量に達した際にsmallのクラスが付与できました。
438
+
439
+ ②スクロールを戻すとクラスをリムーブできました。
440
+
441
+ ②ウィンドウ枠を768px以下にしたところクラスがつかないようになりました。
442
+
443
+ スクロールしてもつかない状態になりました。
444
+
445
+ ④ウィンドウ枠768px以上でかつsmallが付与されている状態でウィンドウ枠を
446
+
447
+ 動かすとsmallが一旦リムーブされていたのがリムーブされなくなりました。
448
+
449
+
450
+
451
+ 【BAD】
452
+
453
+ ①ウィンドウ枠768px以下でsmallがついていない状態からウィンドウ枠を戻しても
454
+
455
+ クラスが付与されません。
456
+
457
+ ②ウィンドウ枠768px以下でスクロールされた状態からウィンドウ幅を広げても
458
+
459
+ 元に戻らず → (つまりsmallが付与されていない?)
460
+
461
+ スクロールさせてあげなければならない。
462
+
463
+
464
+
465
+
466
+
467
+ この書き方は正しい?のでしょうか?

2

追記2

2016/10/25 10:27

投稿

lingwood
lingwood

スコア40

test CHANGED
File without changes
test CHANGED
@@ -124,7 +124,7 @@
124
124
 
125
125
  });
126
126
 
127
-
127
+ ```
128
128
 
129
129
 
130
130
 
@@ -217,3 +217,137 @@
217
217
  となります。
218
218
 
219
219
  よろしくお願い致します。
220
+
221
+
222
+
223
+
224
+
225
+ 【追記 2】
226
+
227
+ ```
228
+
229
+ function init() {
230
+
231
+
232
+
233
+ var y = 300;
234
+
235
+ var x = 768;
236
+
237
+ var scroll = $(window).scrollTop();
238
+
239
+ var width = $(window).width();
240
+
241
+
242
+
243
+ window.addEventListener('scroll', function(e){
244
+
245
+
246
+
247
+ if ( scroll > y ) { //スクロール量がy(300)より大きい時
248
+
249
+ $("header").addClass("smaller");
250
+
251
+
252
+
253
+ } else if ( $(window).scrollTop() < y ) { //それ以外の時にheaderがsmallerを持っていたら外しましょう
254
+
255
+
256
+
257
+ $("header").removeClass("smaller");
258
+
259
+
260
+
261
+ } else if ( $(window).width() < x ) {
262
+
263
+
264
+
265
+ $("header").removeClass("smaller");
266
+
267
+
268
+
269
+ } else if ( $(window).width() > x ) {
270
+
271
+
272
+
273
+ $("header").addClass("smaller");
274
+
275
+
276
+
277
+ }
278
+
279
+
280
+
281
+ });
282
+
283
+
284
+
285
+ window.addEventListener('resize', function(e){
286
+
287
+
288
+
289
+ if ( width < x ) { //widthがx(768)より小さい
290
+
291
+
292
+
293
+ $("header").removeClass("smaller");
294
+
295
+
296
+
297
+ } else if ( $(window).scrollTop() < y ) {
298
+
299
+
300
+
301
+ $("header").removeClass("smaller");
302
+
303
+
304
+
305
+ } else if ( $(window).width() < x ) {
306
+
307
+
308
+
309
+ $("header").addClass("smaller");
310
+
311
+
312
+
313
+ }
314
+
315
+ });
316
+
317
+ }
318
+
319
+ window.onload = init();
320
+
321
+ ```
322
+
323
+
324
+
325
+ デベロッパーツールを見ながらやってみましたところ、
326
+
327
+ 上記のコードで、
328
+
329
+ 【GOOD】
330
+
331
+ ①指定したスクロール量に達した際にsmallのクラスが付与できました。
332
+
333
+ ②スクロールを戻すとクラスをリムーブできました。
334
+
335
+ ②ウィンドウ枠を768px以下にしたところクラスがつかないようになりました。
336
+
337
+ スクロールしてもつかない状態になりました。
338
+
339
+
340
+
341
+ 【BAD】
342
+
343
+ ①ウィンドウ枠768px以上でかつsmallが付与されている状態でウィンドウ枠を
344
+
345
+ 動かすとsmallが一旦リムーブされてしまいました。
346
+
347
+ ②ウィンドウ枠768px以下でsmallがついていない状態からウィンドウ枠を戻しても
348
+
349
+ クラスが付与されません。
350
+
351
+
352
+
353
+ という状況になっております。

1

追記

2016/10/25 10:17

投稿

lingwood
lingwood

スコア40

test CHANGED
File without changes
test CHANGED
@@ -124,7 +124,7 @@
124
124
 
125
125
  });
126
126
 
127
- ```
127
+
128
128
 
129
129
 
130
130
 
@@ -137,3 +137,83 @@
137
137
 
138
138
 
139
139
  お力添えいただけますよう、何卒よろしくお願い申し上げます。
140
+
141
+
142
+
143
+
144
+
145
+
146
+
147
+ 【追記 1】
148
+
149
+
150
+
151
+ ご指摘をいただきまして、コードを変更してみたのですが、ウィンドウをリサイズするとクラスが解除されて
152
+
153
+ しまいヘッダーが元に戻ってしまいました。
154
+
155
+ その後もうまくできず良くわからなくなってきてしまい、
156
+
157
+ 取り急ぎ取得したいイベントの「状態・こうしたい」という形をもう具体的に追記させて頂きたく思います。
158
+
159
+
160
+
161
+ > スクロールすると適度な位置でヘッダーを縮小されて上部にfixedされ、
162
+
163
+ ウィンドウ幅768px以下にした場合にはその際に付与されたクラスを外す
164
+
165
+ ようにしたいです。
166
+
167
+
168
+
169
+
170
+
171
+ 1.ウィンドウ幅768px以上の時
172
+
173
+
174
+
175
+ スクロールさせた時
176
+
177
+ ・スクロールしていない状態の時にはヘッダーは通常通りに表示
178
+
179
+ ・一定の場所までスクロールすると別のクラスを付与
180
+
181
+
182
+
183
+ スクロールを戻した時
184
+
185
+ ・付与したクラスをリムーブ、ヘッダーを元に戻します。
186
+
187
+
188
+
189
+ ウィンドウ幅768px以上の時にウィンドウ幅を変更
190
+
191
+ ・スクロールさせた時、スクロールを戻した時(これは変わらないですが)の
192
+
193
+ 状態と変わらない。
194
+
195
+
196
+
197
+
198
+
199
+ 2.ウィンドウ幅768以下の時
200
+
201
+
202
+
203
+ スクロールさせた時、スクロールを戻した時
204
+
205
+ ・ウィンドウ幅768px以下なのでクラスの付与はしない
206
+
207
+
208
+
209
+ ウィンドウ幅768px以上に変更した場合
210
+
211
+ ・スクロールの位置でクラスの付与がされいる、されていない状態に
212
+
213
+ 変わらなければならない
214
+
215
+
216
+
217
+ となります。
218
+
219
+ よろしくお願い致します。