質問編集履歴

4

デモサイトのurlを追加いたしました。

2021/12/26 13:18

投稿

h-mizu_.23
h-mizu_.23

スコア3

test CHANGED
File without changes
test CHANGED
@@ -345,3 +345,9 @@
345
345
  smooth-scroll.jsは文字数の都合上こちらに記載いたしました。
346
346
 
347
347
  [リンク内容](https://codepen.io/hitomizu4/pen/vYeWpEO)
348
+
349
+
350
+
351
+ 動作確認していただくためデモサイトをアップしました。pcバージョンの画像加工が完了していないため、スマホバージョンで見ていただけると助かります。(実際にスマホで見るとメインビジュアルがスクロールできない状態です。)
352
+
353
+ デモサイト [リンク内容](http://hiotmi0223.html.xdomain.jp/)

3

smooth-scroll.jsをコードペンに記載いたしました。

2021/12/26 13:18

投稿

h-mizu_.23
h-mizu_.23

スコア3

test CHANGED
File without changes
test CHANGED
@@ -339,3 +339,9 @@
339
339
  スライドショーにはjqueryを使用しています。
340
340
 
341
341
  js/main.jsには現在何も書いておりません
342
+
343
+
344
+
345
+ smooth-scroll.jsは文字数の都合上こちらに記載いたしました。
346
+
347
+ [リンク内容](https://codepen.io/hitomizu4/pen/vYeWpEO)

2

js、スタイルシートを記載させていただきました smooth-scroll.jsが本文の入力可能な文字数を超えてしまい記載できておりません

2021/12/25 13:38

投稿

h-mizu_.23
h-mizu_.23

スコア3

test CHANGED
File without changes
test CHANGED
@@ -1,345 +1,341 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
-
4
-
5
3
  ヘッダーを上部に固定し、スクロールしても追従してくるようにしたいです
6
4
 
7
5
  ### 発生している問題・エラーメッセージ
8
6
 
9
7
  スマホで確認するとヘッダー部分とハンバーガーメニュー内のナビゲーションメニューをスクロールすると下へスクロールできますが、メインビジュアル部分のみスクロールできません。
10
8
 
11
- pcで見たり、pc上のスマホバージョンでもスクロールできます。
12
-
13
- メインビジュアルのスライドショーが始まるとタッチしてもスクロールバーが表示されなくなるようです。
9
+ pcで見たり、pc上のスマホバージョンでもスクロールできます。メインビジュアルのスライドショーが始まるとタッチしてもスクロールバーが表示されなくなるようです。
14
-
15
-
16
10
 
17
11
  初心者で至らない点があるかと思いますがどうぞよろしくお願いします。
18
12
 
13
+
14
+
15
+
16
+
17
+ ### 該当のソースコード
18
+
19
+
20
+
21
+ ```html
22
+
23
+ <head>
24
+
25
+ <meta charset="UTF-8">
26
+
27
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
28
+
29
+ <title>demo3hair salon caravan</title>
30
+
31
+ <link rel="stylesheet" href="bootstrap-reboot.css">
32
+
33
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
34
+
35
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
36
+
37
+ <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
38
+
39
+ <script src="js/main.js"></script>
40
+
41
+ <script src="js/smooth-scroll.js"></script>
42
+
43
+ <link rel="stylesheet" href="style.css">
44
+
45
+ <link rel="stylesheet" href="pc.css" media="(min-width:768px)">
46
+
47
+ <link rel="stylesheet" href="sp.css" media="(max-width:767px)">
48
+
49
+ <link rel="preconnect" href="https://fonts.gstatic.com">
50
+
51
+ <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap" rel="stylesheet">
52
+
53
+ <script>
54
+
55
+ var scroll = new SmoothScroll('a[href*="#"]');
56
+
57
+ </script>
58
+
59
+ </head>
60
+
61
+
62
+
63
+ <body>
64
+
65
+ <header id="page-header">
66
+
67
+ <div id="header-container">
68
+
69
+ <div id="btn-container" >
70
+
71
+ <div id="btn-menu">
72
+
73
+ <i></i>
74
+
75
+ <i></i>
76
+
77
+ <i></i>
78
+
79
+ </div><!--#btn-menu-->
80
+
81
+ </div><!--/#btn-container-->
82
+
83
+ <div class="pc rogo"><img src="images/caravan-rogo3.png"></div>
84
+
85
+ <div class="rogo sp"><img src="images/sp-caravan-rogo3.png"></div>
86
+
87
+
88
+
89
+ <div class="yoyaku pc"><a href=""><img src="images/pc-btn-casravan.jpg"></a></div>
90
+
91
+ <div class="yoyaku sp"><a href=""><img src="images/btn-yoyaku.jpg"></a></div>
92
+
93
+
94
+
95
+
96
+
97
+ </div><!--/.header-container-->
98
+
99
+ </header>
100
+
101
+
102
+
103
+
104
+
105
+ <main>
106
+
107
+ <div id="mv-container">
108
+
109
+ <div class="mainvisual-container">
110
+
111
+ <img src="images/sp-caravan-m1−3.jpg" alt="salon image">
112
+
113
+ <img src="images/sp-caravan-m2.jpg" alt="salon image">
114
+
115
+ <img src="images/sp-caravan-m3.jpg" alt="salon image">
116
+
117
+ <img src="images/sp-caravan-m8.jpg" alt="salon image">
118
+
119
+ <img src="images/sp-caravan-m4.jpg" alt="salon image">
120
+
121
+ <img src="images/sp-caravan-m10.jpg" alt="salon image">
122
+
123
+
124
+
125
+ </div><!--/.mainvisual-container-->
126
+
127
+ </div>
128
+
129
+ </main>
130
+
131
+
132
+
133
+ <nav id="nav-main">
134
+
135
+ <div class="background">
136
+
137
+ <ul>
138
+
139
+ <li>menu</li>
140
+
141
+ <li>staff</li>
142
+
143
+ <li>blog</li>
144
+
145
+ <li>access</li>
146
+
147
+ <li>reserve</li>
148
+
149
+ <li>recrute</li>
150
+
151
+ <li>info</li>
152
+
153
+ </ul>
154
+
155
+ </div>
156
+
157
+ </nav>
158
+
159
+
160
+
161
+ <script>
162
+
163
+ $(document).ready(function(){
164
+
165
+ $('.mainvisual-container').bxSlider({
166
+
167
+ mode: 'fade',
168
+
169
+ speed: 3900,
170
+
171
+ auto: true,
172
+
173
+ pager: false,
174
+
175
+ controls: false
176
+
177
+
178
+
179
+ });
180
+
181
+ });
182
+
183
+ </script>
184
+
185
+ <script>
186
+
187
+ $('#btn-menu').on('click',function(){
188
+
189
+ $('#btn-menu, #nav-main' ).toggleClass('show');
190
+
191
+ });
192
+
193
+ </script>
194
+
195
+
196
+
197
+
198
+
199
+ <script>
200
+
201
+ $(function() {
202
+
203
+ const
204
+
205
+ height=$("header-container").height();
206
+
207
+ $("main").css("padding-top",height +40 );
208
+
209
+ });
210
+
211
+ </script>
212
+
19
213
  ```
20
214
 
215
+
216
+
217
+ ```css
218
+
219
+ <style.css>
220
+
221
+ #header-container {
222
+
223
+ display: flex;
224
+
225
+ position: fixed;
226
+
227
+ z-index: 10;
228
+
229
+ width: 100%;
230
+
231
+ height: auto;
232
+
233
+ top: 0;
234
+
235
+ background-color: #fff;
236
+
237
+ }
238
+
239
+
240
+
241
+ #header-container .pc{
242
+
243
+ margin: 0 0 0 auto;
244
+
245
+ }
246
+
247
+ #header-container .sp{
248
+
249
+ margin: 0 0 0 0;
250
+
251
+ }
252
+
253
+ #page-header{
254
+
255
+ height: 40px;
256
+
257
+ }
258
+
259
+ #btn-menu {
260
+
261
+ display: block;
262
+
263
+ width: 25px;
264
+
265
+ height: 33px;
266
+
267
+ position: relative;
268
+
269
+
270
+
271
+ }
272
+
273
+
274
+
275
+ main {
276
+
277
+ top: 45px;
278
+
279
+ }
280
+
281
+ #nav-main {
282
+
283
+ position: fixed;
284
+
285
+ top: 3rem;
286
+
287
+ left:0;
288
+
289
+ right: 0;
290
+
291
+ bottom:0;
292
+
293
+ height: fit-content;
294
+
295
+ padding: 1rem;
296
+
297
+ display: none;
298
+
299
+ transition: opacity .5s, visibility .5s;
300
+
301
+ }
302
+
303
+ #nav-main.show {
304
+
305
+
306
+
307
+ display: block;
308
+
309
+ position: fixed;
310
+
21
- エラーメッセージ
311
+ left: 0;
312
+
313
+ padding: 0;
314
+
315
+ z-index: 11;
316
+
317
+ }
22
318
 
23
319
  ```
24
320
 
25
321
 
26
322
 
27
- ### 該当のソースコード
28
-
29
-
30
-
31
- ```html
32
-
33
- <head>
34
-
35
- <meta charset="UTF-8">
36
-
37
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
38
-
39
- <title>demo3hair salon caravan</title>
40
-
41
- <link rel="stylesheet" href="bootstrap-reboot.css">
42
-
43
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
44
-
45
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
46
-
47
- <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
48
-
49
- <script src="js/main.js"></script>
50
-
51
- <script src="js/smooth-scroll.js"></script>
52
-
53
- <link rel="stylesheet" href="style.css">
54
-
55
- <link rel="stylesheet" href="pc.css" media="(min-width:768px)">
56
-
57
- <link rel="stylesheet" href="sp.css" media="(max-width:767px)">
58
-
59
- <link rel="preconnect" href="https://fonts.gstatic.com">
60
-
61
- <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap" rel="stylesheet">
62
-
63
- <script>
323
+ ```javascript
64
-
65
- var scroll = new SmoothScroll('a[href*="#"]');
324
+
66
-
67
- </script>
68
-
69
- </head>
70
-
71
-
72
-
73
- <body>
74
-
75
- <header id="page-header">
76
-
77
- <div id="header-container">
78
-
79
- <div id="btn-container" >
80
-
81
- <div id="btn-menu">
82
-
83
- <i></i>
84
-
85
- <i></i>
86
-
87
- <i></i>
88
-
89
- </div><!--#btn-menu-->
90
-
91
- </div><!--/#btn-container-->
92
-
93
- <div class="pc rogo"><img src="images/caravan-rogo3.png"></div>
94
-
95
- <div class="rogo sp"><img src="images/sp-caravan-rogo3.png"></div>
96
-
97
-
98
-
99
- <div class="yoyaku pc"><a href=""><img src="images/pc-btn-casravan.jpg"></a></div>
100
-
101
- <div class="yoyaku sp"><a href=""><img src="images/btn-yoyaku.jpg"></a></div>
102
-
103
-
104
-
105
-
106
-
107
- </div><!--/.header-container-->
108
-
109
- </header>
110
-
111
-
112
-
113
-
114
-
115
- <main>
325
+ <main.js>
116
-
117
- <div id="mv-container">
118
-
119
- <div class="mainvisual-container">
120
-
121
- <img src="images/sp-caravan-m1−3.jpg" alt="salon image">
122
-
123
- <img src="images/sp-caravan-m2.jpg" alt="salon image">
124
-
125
- <img src="images/sp-caravan-m3.jpg" alt="salon image">
126
-
127
- <img src="images/sp-caravan-m8.jpg" alt="salon image">
128
-
129
- <img src="images/sp-caravan-m4.jpg" alt="salon image">
130
-
131
- <img src="images/sp-caravan-m10.jpg" alt="salon image">
132
-
133
-
134
-
135
- </div><!--/.mainvisual-container-->
136
-
137
- </div>
138
-
139
- </main>
140
-
141
-
142
-
143
- <nav id="nav-main">
144
-
145
- <div class="background">
146
-
147
- <ul>
148
-
149
- <li>menu</li>
150
-
151
- <li>staff</li>
152
-
153
- <li>blog</li>
154
-
155
- <li>access</li>
156
-
157
- <li>reserve</li>
158
-
159
- <li>recrute</li>
160
-
161
- <li>info</li>
162
-
163
- </ul>
164
-
165
- </div>
166
-
167
- </nav>
168
-
169
-
170
-
171
- <script>
172
-
173
- $(document).ready(function(){
174
-
175
- $('.mainvisual-container').bxSlider({
176
-
177
- mode: 'fade',
178
-
179
- speed: 3900,
180
-
181
- auto: true,
182
-
183
- pager: false,
184
-
185
- controls: false
186
-
187
-
188
-
189
- });
190
-
191
- });
192
-
193
- </script>
194
-
195
- <script>
196
-
197
- $('#btn-menu').on('click',function(){
198
-
199
- $('#btn-menu, #nav-main' ).toggleClass('show');
200
-
201
- });
202
-
203
- </script>
204
-
205
-
206
-
207
-
208
-
209
- <script>
210
-
211
- $(function() {
212
-
213
- const
214
-
215
- height=$("header-container").height();
216
-
217
- $("main").css("padding-top",height +40 );
218
-
219
- });
220
-
221
- </script>
222
326
 
223
327
  ```
224
328
 
225
-
226
-
227
- ```css
228
-
229
- #header-container {
230
-
231
- display: flex;
232
-
233
- position: fixed;
234
-
235
- z-index: 10;
236
-
237
- width: 100%;
238
-
239
- height: auto;
240
-
241
- top: 0;
242
-
243
- background-color: #fff;
244
-
245
- }
246
-
247
-
248
-
249
- #header-container .pc{
250
-
251
- margin: 0 0 0 auto;
252
-
253
- }
254
-
255
- #header-container .sp{
256
-
257
- margin: 0 0 0 0;
258
-
259
- }
260
-
261
- #page-header{
262
-
263
- height: 40px;
264
-
265
- }
266
-
267
- #btn-menu {
268
-
269
- display: block;
270
-
271
- width: 25px;
272
-
273
- height: 33px;
274
-
275
- position: relative;
276
-
277
-
278
-
279
- }
280
-
281
-
282
-
283
- main {
284
-
285
- top: 45px;
286
-
287
- }
288
-
289
- #nav-main {
290
-
291
- position: fixed;
292
-
293
- top: 3rem;
294
-
295
- left:0;
296
-
297
- right: 0;
298
-
299
- bottom:0;
300
-
301
- height: fit-content;
302
-
303
- padding: 1rem;
304
-
305
- display: none;
306
-
307
- transition: opacity .5s, visibility .5s;
308
-
309
- }
310
-
311
- #nav-main.show {
312
-
313
-
314
-
315
- display: block;
316
-
317
- position: fixed;
318
-
319
- left: 0;
320
-
321
- padding: 0;
322
-
323
- z-index: 11;
324
-
325
- }
326
-
327
- ```
328
-
329
-
330
-
331
329
  ### 試したこと
332
330
 
333
331
  ・ヘッダーに100vhを指定するとスクロールできますが、リンク先をクリックできず、またヘッダーの背景を白にしたいので画面全体が真っ白になります。
334
332
 
335
-
336
-
337
333
  ・position: stickyを指定しましたが変化がありませんでした。
338
334
 
339
-
340
-
341
335
  ・その他スムーズにスクロールするjqueryなど試しましたが変化がありませんでした。
342
336
 
343
337
  ### 補足情報(FW/ツールのバージョンなど)
344
338
 
345
339
  スライドショーにはjqueryを使用しています。
340
+
341
+ js/main.jsには現在何も書いておりません

1

コードの入力方法を間違えておりました。また再度確認した所おそらく全てコードが読み込まれると position:fixed を外してもスマホではスクロールできませんでした。

2021/12/24 14:43

投稿

h-mizu_.23
h-mizu_.23

スコア3

test CHANGED
File without changes
test CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  スマホで確認するとヘッダー部分とハンバーガーメニュー内のナビゲーションメニューをスクロールすると下へスクロールできますが、メインビジュアル部分のみスクロールできません。
10
10
 
11
- ヘッダーのposition:fixedを外すとスクロールできます。pcで見たり、pc上のスマホバージョンでもスクロールできます。
11
+ pcで見たり、pc上のスマホバージョンでもスクロールできます。
12
12
 
13
13
  メインビジュアルのスライドショーが始まるとタッチしてもスクロールバーが表示されなくなるようです。
14
14
 
@@ -28,9 +28,49 @@
28
28
 
29
29
 
30
30
 
31
+ ```html
32
+
31
- <HTML>
33
+ <head>
34
+
32
-
35
+ <meta charset="UTF-8">
36
+
37
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
38
+
39
+ <title>demo3hair salon caravan</title>
40
+
41
+ <link rel="stylesheet" href="bootstrap-reboot.css">
42
+
43
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
44
+
45
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
46
+
47
+ <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
48
+
49
+ <script src="js/main.js"></script>
50
+
51
+ <script src="js/smooth-scroll.js"></script>
52
+
53
+ <link rel="stylesheet" href="style.css">
54
+
55
+ <link rel="stylesheet" href="pc.css" media="(min-width:768px)">
56
+
57
+ <link rel="stylesheet" href="sp.css" media="(max-width:767px)">
58
+
59
+ <link rel="preconnect" href="https://fonts.gstatic.com">
60
+
61
+ <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap" rel="stylesheet">
62
+
63
+ <script>
64
+
65
+ var scroll = new SmoothScroll('a[href*="#"]');
66
+
67
+ </script>
68
+
69
+ </head>
70
+
71
+
72
+
33
- ソースコード
73
+ <body>
34
74
 
35
75
  <header id="page-header">
36
76
 
@@ -180,15 +220,17 @@
180
220
 
181
221
  </script>
182
222
 
183
-
184
-
185
223
  ```
186
224
 
225
+
226
+
187
- <CSS>
227
+ ```css
188
228
 
189
229
  #header-container {
190
230
 
231
+ display: flex;
232
+
191
- position: fixed;
233
+ position: fixed;
192
234
 
193
235
  z-index: 10;
194
236
 
@@ -204,18 +246,6 @@
204
246
 
205
247
 
206
248
 
207
-
208
-
209
-
210
-
211
-
212
-
213
- #header-container{
214
-
215
- display: flex;
216
-
217
- }
218
-
219
249
  #header-container .pc{
220
250
 
221
251
  margin: 0 0 0 auto;
@@ -234,120 +264,80 @@
234
264
 
235
265
  }
236
266
 
267
+ #btn-menu {
268
+
269
+ display: block;
270
+
271
+ width: 25px;
272
+
273
+ height: 33px;
274
+
275
+ position: relative;
276
+
277
+
278
+
279
+ }
280
+
281
+
282
+
237
283
  main {
238
284
 
239
285
  top: 45px;
240
286
 
241
- overflow:visible;
242
-
243
- }
287
+ }
244
-
245
-
246
-
288
+
247
- #mv-container{
289
+ #nav-main {
248
-
290
+
249
- overflow:visible;
291
+ position: fixed;
292
+
250
-
293
+ top: 3rem;
294
+
295
+ left:0;
296
+
297
+ right: 0;
298
+
299
+ bottom:0;
300
+
301
+ height: fit-content;
302
+
303
+ padding: 1rem;
304
+
305
+ display: none;
306
+
307
+ transition: opacity .5s, visibility .5s;
308
+
251
- }
309
+ }
252
-
310
+
253
- #nav-main ul{
311
+ #nav-main.show {
254
-
255
- list-style: none;
312
+
313
+
256
314
 
257
315
  display: block;
258
316
 
259
- padding-left:0;
260
-
261
- margin-bottom:0;
262
-
263
-
264
-
265
- }
266
-
267
-
268
-
269
- #nav-main ul li a {
270
-
271
- display :block;
272
-
273
- background-color: #999;
274
-
275
- color: white;
276
-
277
- padding-top: .1em;
278
-
279
- padding-bottom: .1em;
280
-
281
- padding-left: .5em;
282
-
283
- padding-right: .5em;
284
-
285
- }
286
-
287
- #nav-main ul li a:hover{
288
-
289
- text-decoration: none;
290
-
291
- background-color: #666;
292
-
293
- }
294
-
295
-
296
-
297
- #nav-main ul li {
298
-
299
- width: 100%;
300
-
301
- border-left: none;
302
-
303
- padding-left: 10px;
304
-
305
- }
306
-
307
- #nav-main {
308
-
309
- position: fixed;
310
-
311
- top: 3rem;
312
-
313
- left:0;
314
-
315
- right: 0;
316
-
317
- bottom:0;
318
-
319
- height: fit-content;
320
-
321
- padding: 1rem;
322
-
323
- display: none;
324
-
325
- transition: opacity .5s, visibility .5s;
326
-
327
- }
328
-
329
- #nav-main.show {
330
-
331
-
332
-
333
- display: block;
334
-
335
317
  position: fixed;
336
318
 
337
319
  left: 0;
338
320
 
339
321
  padding: 0;
340
322
 
341
- z-index: 101;
323
+ z-index: 11;
342
324
 
343
325
  }
344
326
 
327
+ ```
328
+
329
+
330
+
345
331
  ### 試したこと
346
332
 
347
333
  ・ヘッダーに100vhを指定するとスクロールできますが、リンク先をクリックできず、またヘッダーの背景を白にしたいので画面全体が真っ白になります。
348
334
 
335
+
336
+
349
337
  ・position: stickyを指定しましたが変化がありませんでした。
350
338
 
339
+
340
+
351
341
  ・その他スムーズにスクロールするjqueryなど試しましたが変化がありませんでした。
352
342
 
353
343
  ### 補足情報(FW/ツールのバージョンなど)