teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問スクリプトが競合しているとこを教えてください

編集履歴

質問編集履歴

4

コード修正

2017/12/20 16:52

投稿

KEJ
KEJ

スコア14

test CHANGED
File without changes
test CHANGED
@@ -20,7 +20,7 @@
20
20
 
21
21
  <style>
22
22
 
23
- .nav_container {
23
+ #menu-wrap {
24
24
 
25
25
  position: fixed;
26
26
 
@@ -262,7 +262,7 @@
262
262
 
263
263
  <body>
264
264
 
265
- <div class="nav_container">
265
+ <div id="menu-wrap">
266
266
 
267
267
  <a class="menu-trigger"> <span></span> <span></span> <span></span> </a>
268
268
 

3

記述を修正致しました。

2017/12/20 16:52

投稿

KEJ
KEJ

スコア14

test CHANGED
File without changes
test CHANGED
@@ -6,35 +6,223 @@
6
6
 
7
7
 
8
8
 
9
+ ```html
10
+
11
+ <!doctype html>
12
+
13
+ <html>
14
+
15
+ <head>
16
+
17
+ <meta charset="UTF-8">
18
+
19
+ <title>無題ドキュメント</title>
20
+
21
+ <style>
22
+
23
+ .nav_container {
24
+
25
+ position: fixed;
26
+
27
+ top: 0;
28
+
29
+ width: 100%;
30
+
31
+ height: 50px;
32
+
33
+ z-index: 19;
34
+
35
+ background-color: #61a951;
36
+
37
+ }
38
+
39
+ .menu-trigger, .menu-trigger span {
40
+
41
+ display: inline-block;
42
+
43
+ transition: all .4s;
44
+
45
+ box-sizing: border-box;
46
+
47
+ cursor : pointer;
48
+
49
+ }
50
+
51
+ .menu-trigger {
52
+
53
+ position: fixed;
54
+
55
+ top: -5px;
56
+
57
+ right: 10px;
58
+
59
+ width: 35px;
60
+
61
+ height: 56px;
62
+
63
+ z-index: 20;
64
+
65
+ }
66
+
67
+ .menu-trigger span {
68
+
69
+ position: absolute;
70
+
71
+ background: #fff;
72
+
73
+ width: 35px;
74
+
75
+ height: 2px;
76
+
77
+ margin: auto;
78
+
79
+ }
80
+
81
+ .menu-trigger span:nth-of-type(1) {
82
+
83
+ top: 15px;
84
+
85
+ }
86
+
87
+ .menu-trigger span:nth-of-type(2) {
88
+
89
+ top: 0;
90
+
91
+ bottom: 0;
92
+
93
+ }
94
+
95
+ .menu-trigger span:nth-of-type(3) {
96
+
97
+ bottom: 15px;
98
+
99
+ }
100
+
101
+ .menu-trigger.active span:nth-of-type(1) {
102
+
103
+ -webkit-transform: translateY(12px) rotate(-45deg);
104
+
105
+ transform: translateY(12px) rotate(-45deg);
106
+
107
+ }
108
+
109
+ .menu-trigger.active span:nth-of-type(2) {
110
+
111
+ opacity: 0;
112
+
113
+ }
114
+
115
+ .menu-trigger.active span:nth-of-type(3) {
116
+
117
+ -webkit-transform: translateY(-12px) rotate(45deg);
118
+
119
+ transform: translateY(-12px) rotate(45deg);
120
+
121
+ }
122
+
123
+ .g-nav {
124
+
125
+ display: none;
126
+
127
+ position: fixed;
128
+
129
+ top: 0;
130
+
131
+ right: 0;
132
+
133
+ background:#ccc;
134
+
135
+ width: 100%;
136
+
137
+ height: 80%;
138
+
139
+ opacity: .98;
140
+
141
+ z-index: 10;
142
+
143
+ }
144
+
145
+ .list {
146
+
147
+ padding: 0px;
148
+
149
+ width: 80%;
150
+
151
+ margin: 10px auto;
152
+
153
+ margin-top: 10px;
154
+
155
+ list-style: none;
156
+
157
+ overflow-y: scroll;
158
+
159
+ -webkit-overflow-scrolling: touch;
160
+
161
+ }
162
+
163
+ .list .item {
164
+
165
+ border-bottom: 1px solid #000;
166
+
167
+ }
168
+
169
+ .item a {
170
+
171
+ display: block;
172
+
173
+ text-decoration: none;
174
+
175
+ color: #000;
176
+
177
+ padding: 25px 0 5px;
178
+
179
+ font-size: 1rem;
180
+
181
+ font-weight: 900;
182
+
183
+ }
184
+
185
+ .cont{
186
+
187
+ width:100vw;
188
+
189
+ height:1000px;
190
+
191
+ }
192
+
193
+ </style>
194
+
195
+
196
+
197
+
198
+
199
+ <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
200
+
9
- ```javascript
201
+ <script>
10
-
202
+
11
- // JavaScript Document
203
+ //ハンバーガーメニューのトリガー
204
+
12
-
205
+ $(function(){
206
+
13
-
207
+ $('.menu-trigger').on('click',function(){
208
+
14
-
209
+ $(this).toggleClass('active');
210
+
211
+ $('.g-nav').slideToggle();
212
+
213
+ });
214
+
215
+ });
216
+
15
- //ヘッダーをトップで固定pc用　スマホは固定分の隙間をなくす
217
+ //※ここが効かなくなる
16
218
 
17
219
  $(function(){
18
220
 
19
- var box = $("#menu-wrap");
20
-
21
- var boxTop = box.offset().top;
22
-
23
- $(window).scroll(function () {
221
+ $('.list li').on('click', function() {
24
-
25
- if($(window).scrollTop() >= boxTop && !window.matchMedia('screen and (max-width: 780px)').matches){
222
+
26
-
27
- box.addClass("fixed");
28
-
29
- $("body").css("margin-top","8vw");
223
+ $('.menu-trigger').removeClass('active');
30
-
31
- } else {
224
+
32
-
33
- box.removeClass("fixed");
225
+ $('.g-nav').slideToggle();
34
-
35
- $("body").css("margin-top","0px");
36
-
37
- }
38
226
 
39
227
  });
40
228
 
@@ -42,138 +230,78 @@
42
230
 
43
231
 
44
232
 
233
+
234
+
235
+ //ヘッダーの高さ分だけずらしてスクロール(ここを消すと※が動く)
236
+
45
- $(function(){
237
+ $(function () {
238
+
46
-
239
+ var headerHight = $("#menu-wrap").height();
240
+
47
- $('#menu img').hover(function(){
241
+ $('a[href^=#]').click(function(){
48
-
49
- $(this).attr('src', $(this).attr('src').replace('_off', '_on'));
242
+
50
-
51
- }, function(){
52
-
53
- if (!$(this).hasClass('currentPage')) {
243
+ var href= $(this).attr("href");
54
-
244
+
55
- $(this).attr('src', $(this).attr('src').replace('_on', '_off'));
245
+ var target = $(href == "#" || href == "" ? 'html' : href);
246
+
56
-
247
+ var position = target.offset().top-headerHight;
248
+
249
+ $("html, body").animate({scrollTop:position}, 550, "swing");
250
+
57
- }
251
+ return false;
58
252
 
59
253
  });
60
254
 
61
255
  });
62
256
 
63
-
64
-
65
-
66
-
67
- //サイドメニュー固定
68
-
69
- jQuery(function($) {
70
-
71
-
72
-
73
- var nav = $('.nav_side'),
74
-
75
- offset = nav.offset();
76
-
77
-
78
-
79
- $(window).scroll(function () {
80
-
81
- if($(window).scrollTop() > offset.top - 100) {
82
-
83
- nav.addClass('fixed_side');
84
-
85
- } else {
86
-
87
- nav.removeClass('fixed_side');
88
-
89
- }
90
-
91
- });
92
-
93
-
94
-
95
- });
96
-
97
-
98
-
99
- //ハンバーガーメニューのトリガー
100
-
101
- $(function(){
102
-
103
- $('.menu-trigger').on('click',function(){
104
-
105
- $(this).toggleClass('active');
106
-
107
- $('.g-nav').slideToggle();
108
-
109
- });
110
-
111
- });
112
-
113
-
114
-
115
- //※ここの部分が効きません
116
-
117
- $(function(){
118
-
119
- $('.list li').on('click', function() {
120
-
121
- $('.menu-trigger').removeClass('active');
122
-
123
- $('.g-nav').slideToggle();
124
-
125
- });
126
-
127
- });
128
-
129
-
130
-
131
-
132
-
133
- //ヘッダーの高さ分だけずらしてスクロール
134
-
135
- $(function () {
136
-
137
- var headerHight = $("#menu-wrap").height();
138
-
139
- $('a[href^=#]').click(function(){
140
-
141
- var href= $(this).attr("href");
142
-
143
- var target = $(href == "#" || href == "" ? 'html' : href);
144
-
145
- var position = target.offset().top-headerHight;
146
-
147
- $("html, body").animate({scrollTop:position}, 550, "swing");
148
-
149
- return false;
150
-
151
- });
152
-
153
- });
154
-
155
-
156
-
157
- //ポップアップアニメーション
158
-
159
- $(window).scroll(function() {
160
-
161
- $('.animatedElement').each(function(){
162
-
163
- var imagePos = $(this).offset().top;
164
-
165
-
166
-
167
- var topOfWindow = $(window).scrollTop();
168
-
169
- if (imagePos < topOfWindow+800) {
170
-
171
- $(this).addClass("fadeIn");
172
-
173
- }
174
-
175
- });
176
-
177
- });
257
+ </script>
258
+
259
+ </head>
260
+
261
+
262
+
263
+ <body>
264
+
265
+ <div class="nav_container">
266
+
267
+ <a class="menu-trigger"> <span></span> <span></span> <span></span> </a>
268
+
269
+ <nav class="g-nav">
270
+
271
+ <ul class="list">
272
+
273
+ <li class="item"><a href="#content_first">コンテンツ１</a></li>
274
+
275
+ <li class="item"><a href="#content_second">コンテンツ２</a></li>
276
+
277
+ <li class="item"><a href="#content_third">コンテンツ３</a></li>
278
+
279
+ <li class="item"><a href="#content_fourth">コンテンツ４</a></li>
280
+
281
+ </ul>
282
+
283
+ </nav>
284
+
285
+ </div>
286
+
287
+ <div id="content_first" class="cont">コンテンツ１
288
+
289
+ </div>
290
+
291
+ <div id="content_second" class="cont">コンテンツ2
292
+
293
+ </div>
294
+
295
+ <div id="content_third" class="cont">コンテンツ3
296
+
297
+ </div>
298
+
299
+ <div id="content_fourth" class="cont">コンテンツ4
300
+
301
+ </div>
302
+
303
+ </body>
304
+
305
+ </html>
178
306
 
179
307
  ```

2

全てのjavascriptを追記致しました。宜しくお願いいたします。

2017/12/20 16:37

投稿

KEJ
KEJ

スコア14

test CHANGED
File without changes
test CHANGED
@@ -7,6 +7,94 @@
7
7
 
8
8
 
9
9
  ```javascript
10
+
11
+ // JavaScript Document
12
+
13
+
14
+
15
+ //ヘッダーをトップで固定pc用　スマホは固定分の隙間をなくす
16
+
17
+ $(function(){
18
+
19
+ var box = $("#menu-wrap");
20
+
21
+ var boxTop = box.offset().top;
22
+
23
+ $(window).scroll(function () {
24
+
25
+ if($(window).scrollTop() >= boxTop && !window.matchMedia('screen and (max-width: 780px)').matches){
26
+
27
+ box.addClass("fixed");
28
+
29
+ $("body").css("margin-top","8vw");
30
+
31
+ } else {
32
+
33
+ box.removeClass("fixed");
34
+
35
+ $("body").css("margin-top","0px");
36
+
37
+ }
38
+
39
+ });
40
+
41
+ });
42
+
43
+
44
+
45
+ $(function(){
46
+
47
+ $('#menu img').hover(function(){
48
+
49
+ $(this).attr('src', $(this).attr('src').replace('_off', '_on'));
50
+
51
+ }, function(){
52
+
53
+ if (!$(this).hasClass('currentPage')) {
54
+
55
+ $(this).attr('src', $(this).attr('src').replace('_on', '_off'));
56
+
57
+ }
58
+
59
+ });
60
+
61
+ });
62
+
63
+
64
+
65
+
66
+
67
+ //サイドメニュー固定
68
+
69
+ jQuery(function($) {
70
+
71
+
72
+
73
+ var nav = $('.nav_side'),
74
+
75
+ offset = nav.offset();
76
+
77
+
78
+
79
+ $(window).scroll(function () {
80
+
81
+ if($(window).scrollTop() > offset.top - 100) {
82
+
83
+ nav.addClass('fixed_side');
84
+
85
+ } else {
86
+
87
+ nav.removeClass('fixed_side');
88
+
89
+ }
90
+
91
+ });
92
+
93
+
94
+
95
+ });
96
+
97
+
10
98
 
11
99
  //ハンバーガーメニューのトリガー
12
100
 
@@ -24,7 +112,7 @@
24
112
 
25
113
 
26
114
 
27
- //ここの部分が効かなくなる
115
+ //※ここの部分が効きません
28
116
 
29
117
  $(function(){
30
118
 
@@ -64,4 +152,28 @@
64
152
 
65
153
  });
66
154
 
155
+
156
+
157
+ //ポップアップアニメーション
158
+
159
+ $(window).scroll(function() {
160
+
161
+ $('.animatedElement').each(function(){
162
+
163
+ var imagePos = $(this).offset().top;
164
+
165
+
166
+
167
+ var topOfWindow = $(window).scrollTop();
168
+
169
+ if (imagePos < topOfWindow+800) {
170
+
171
+ $(this).addClass("fadeIn");
172
+
173
+ }
174
+
175
+ });
176
+
177
+ });
178
+
67
179
  ```

1

質問の変更

2017/12/20 16:28

投稿

KEJ
KEJ

スコア14

test CHANGED
@@ -1 +1 @@
1
- バーガーメニューとスムーススクロールが競合する
1
+ スクリプトが競合しているとこを教えてください
test CHANGED
@@ -1,8 +1,8 @@
1
- [https://teratail.com/questions/104711](https://teratail.com/questions/104711)
1
+ スクロールのスクリプトを入れるとハンバーガーメニューが効かなくなってしましました。
2
2
 
3
- 以前ここで質問させていただきハンバーガーメニューのクローズは解決したのですがスムーススクロールを入れるとまたバーガーメニューが閉じなくなってしまいました。
3
+ 何かが競合しているのでしょうか？
4
4
 
5
- どうか解決方法をご教授お願いいたします。
5
+ 解決策をご教授お願いいたします。
6
6
 
7
7
 
8
8
 
@@ -24,6 +24,8 @@
24
24
 
25
25
 
26
26
 
27
+ //ここの部分が効かなくなる
28
+
27
29
  $(function(){
28
30
 
29
31
  $('.list li').on('click', function() {
@@ -38,25 +40,27 @@
38
40
 
39
41
 
40
42
 
41
- //スムーススクロール
42
43
 
43
- $(function(){
44
44
 
45
- $('a[href^="#"]').click(function(){
45
+ //ヘッダーの高さ分だけずらしてスクロール
46
46
 
47
- var speed = 500;
47
+ $(function () {
48
48
 
49
- var href= $(this).attr("href");
49
+ var headerHight = $("#menu-wrap").height();
50
50
 
51
- var target = $(href == "#" || href == "" ? 'html' : href);
51
+ $('a[href^=#]').click(function(){
52
52
 
53
- var position = target.offset().top;
53
+ var href= $(this).attr("href");
54
54
 
55
- $("html, body").animate({scrollTop:position}, speed, "swing");
55
+ var target = $(href == "#" || href == "" ? 'html' : href);
56
56
 
57
- return false;
57
+ var position = target.offset().top-headerHight;
58
58
 
59
+ $("html, body").animate({scrollTop:position}, 550, "swing");
60
+
61
+ return false;
62
+
59
- });
63
+ });
60
64
 
61
65
  });
62
66