質問編集履歴
4
文書の修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -360,8 +360,8 @@
|
|
|
360
360
|
$(function () {
|
|
361
361
|
var state = false;
|
|
362
362
|
var scrollpos;
|
|
363
|
-
$(".hamburger").
|
|
363
|
+
$(".hamburger").on("click", function () {
|
|
364
|
-
$(this).toggleClass("
|
|
364
|
+
$("this").toggleClass("open");
|
|
365
365
|
if (state == false) {
|
|
366
366
|
scrollpos = $(window).scrollTop();
|
|
367
367
|
$("body").addClass("is-fixed").css({ top: -scrollpos });
|
3
書式の改善
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -360,8 +360,8 @@
|
|
|
360
360
|
$(function () {
|
|
361
361
|
var state = false;
|
|
362
362
|
var scrollpos;
|
|
363
|
-
$(".hamburger").
|
|
363
|
+
$(".hamburger").click(function () {
|
|
364
|
-
$(
|
|
364
|
+
$(this).toggleClass("active");
|
|
365
365
|
if (state == false) {
|
|
366
366
|
scrollpos = $(window).scrollTop();
|
|
367
367
|
$("body").addClass("is-fixed").css({ top: -scrollpos });
|
2
書式の改善
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -351,13 +351,28 @@
|
|
|
351
351
|
|
|
352
352
|
if ($(this).hasClass("active")) {
|
|
353
353
|
$(".globalMenuSp").addClass("active");
|
|
354
|
-
$("body").addClass("is-fixed");
|
|
355
354
|
} else {
|
|
356
355
|
$(".globalMenuSp").removeClass("active");
|
|
357
|
-
$("body").addClass("is-fixed");
|
|
358
356
|
}
|
|
359
357
|
});
|
|
360
358
|
});
|
|
359
|
+
|
|
360
|
+
$(function () {
|
|
361
|
+
var state = false;
|
|
362
|
+
var scrollpos;
|
|
363
|
+
$(".hamburger").on("click", function () {
|
|
364
|
+
$("ul").toggleClass("active");
|
|
365
|
+
if (state == false) {
|
|
366
|
+
scrollpos = $(window).scrollTop();
|
|
367
|
+
$("body").addClass("is-fixed").css({ top: -scrollpos });
|
|
368
|
+
state = true;
|
|
369
|
+
} else {
|
|
370
|
+
$("body").removeClass("is-fixed").css({ top: 0 });
|
|
371
|
+
window.scrollTo(0, scrollpos);
|
|
372
|
+
state = false;
|
|
373
|
+
}
|
|
374
|
+
});
|
|
375
|
+
});
|
|
361
376
|
```
|
|
362
377
|
|
|
363
378
|
### 試したこと
|
1
書式の改善
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -346,18 +346,15 @@
|
|
|
346
346
|
|
|
347
347
|
```javascript
|
|
348
348
|
$(function () {
|
|
349
|
-
var state = false;
|
|
350
|
-
var scrollpos;
|
|
351
|
-
$(".hamburger").
|
|
349
|
+
$(".hamburger").click(function () {
|
|
350
|
+
$(this).toggleClass("active");
|
|
351
|
+
|
|
352
|
+
if ($(this).hasClass("active")) {
|
|
353
|
+
$(".globalMenuSp").addClass("active");
|
|
352
|
-
|
|
354
|
+
$("body").addClass("is-fixed");
|
|
353
|
-
if (state == false) {
|
|
354
|
-
scrollpos = $(window).scrollTop();
|
|
355
|
-
$("body").addClass("is-fixed").css({ top: -scrollpos });
|
|
356
|
-
state = true;
|
|
357
355
|
} else {
|
|
356
|
+
$(".globalMenuSp").removeClass("active");
|
|
358
|
-
$("body").
|
|
357
|
+
$("body").addClass("is-fixed");
|
|
359
|
-
window.scrollTo(0, scrollpos);
|
|
360
|
-
state = false;
|
|
361
358
|
}
|
|
362
359
|
});
|
|
363
360
|
});
|
|
@@ -368,4 +365,9 @@
|
|
|
368
365
|
「class globalMenuSp」に対して「position: fixed」を付与していますので
|
|
369
366
|
その直下の「ul」に対して、「height: 100%; overflow: auto」のコードを記述しました。
|
|
370
367
|
しかし「height: 100%」が効かず、やはりスクロールができませんでした。
|
|
371
|
-
heightの高さを指定すると効くようになりますが、ドロワー部分が崩れてしまいます。
|
|
368
|
+
heightの高さを指定すると効くようになりますが、ドロワー部分が崩れてしまいます。
|
|
369
|
+
|
|
370
|
+
javascriptでコードの記入漏れと誤りがありました。
|
|
371
|
+
「class hamburger」をクリックするとトグルが変形し
|
|
372
|
+
アクティブになれば「class globalMenuSp」に対して「class active」を付与し、ドロワーメニューの開閉
|
|
373
|
+
同時に「body」に対して「class is-fixed」を付与し、背景が固定されるようにしています。
|