teratail
回答率
85.31%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問iphoneだとfixedフッターが固定されない

編集履歴

質問編集履歴

5

画像追加

2019/05/14 06:53

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -327,3 +327,33 @@
327
327
 
328
328
 
329
329
  よろしくお願いします。
330
+
331
+
332
+
333
+ ### 追記（画像）
334
+
335
+ 本当に一瞬だけの症状なので、スクショとるのにけっこう苦戦しました・・・。
336
+
337
+ （スクショした頃には元の位置に戻ったりするので）
338
+
339
+
340
+
341
+ わかりづらい画像ではありますが、伝わると幸いです。
342
+
343
+
344
+
345
+ ※下のバーはiphoneの仕様です。
346
+
347
+ そこが大体ではありますが、ディスプレイ最下部です。目安になるかと思います。
348
+
349
+
350
+
351
+ ｜　通常時
352
+
353
+ ![通常時](5c195c02c011f3dbbf8287bb916863eb.jpeg)
354
+
355
+
356
+
357
+ ｜　ズレ時
358
+
359
+ ![ズレ](ea2669c6f44bb2d03c0161c99043ae43.jpeg)

4

padding-bottomに変更

2019/05/14 06:53

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -192,7 +192,7 @@
192
192
 
193
193
  var bH = $('.FixedF_M').height();
194
194
 
195
- $('body').css('margin-bottom',bH+'px');
195
+ $('body').css('padding-bottom',bH+'px');
196
196
 
197
197
  $('.FixedF_M').css('visibility','visible');
198
198
 

3

よりわかりやすく

2019/05/08 13:16

投稿

Miii
Miii

スコア30

test CHANGED
@@ -1 +1 @@
1
- iphoneだとフィクスドフッターが跳ねる
1
+ iphoneだとfixedフッターが固定されない
test CHANGED
File without changes

2

見やすく

2019/05/04 04:27

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -44,24 +44,16 @@
44
44
 
45
45
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
46
46
 
47
+ </head>
48
+
49
+
50
+
51
+
52
+
53
+ <body>
54
+
47
55
 
48
56
 
49
-
50
-
51
-
52
-
53
-
54
-
55
-
56
-
57
- </head>
58
-
59
-
60
-
61
- <body>
62
-
63
-
64
-
65
57
  <p>テストテストテスト</p>
66
58
 
67
59
  <p>テストテストテスト</p>
@@ -172,7 +164,7 @@
172
164
 
173
165
 
174
166
 
175
- <div class="FixedfooterMenu">
167
+ <div class="FixedF_M">
176
168
 
177
169
  <a href="https://"><i class="fas fa-map-marker-alt"></i><span>MAP</span></a>
178
170
 
@@ -188,36 +180,34 @@
188
180
 
189
181
  <script>
190
182
 
191
- //スマホの場合、フローティングメニュー表示
192
-
193
183
  $(function() {
194
184
 
195
- if ((navigator.userAgent.indexOf('iPhone') > 0
185
+ if ((navigator.userAgent.indexOf('iPhone') > 0
196
-
186
+
197
- && navigator.userAgent.indexOf('iPad') == -1)
187
+ && navigator.userAgent.indexOf('iPad') == -1)
198
-
188
+
199
- || navigator.userAgent.indexOf('iPod') > 0
189
+ || navigator.userAgent.indexOf('iPod') > 0
200
-
190
+
201
- || navigator.userAgent.indexOf('Android') > 0) {
191
+ || navigator.userAgent.indexOf('Android') > 0) {
202
-
192
+
203
- var bH = $('.FixedF_M').height();
193
+ var bH = $('.FixedF_M').height();
204
-
194
+
205
- $('body').css('margin-bottom',bH+'px');
195
+ $('body').css('margin-bottom',bH+'px');
206
-
196
+
207
- $('.FixedF_M').css('visibility','visible');
197
+ $('.FixedF_M').css('visibility','visible');
208
-
209
-
210
-
198
+
211
- }else{
199
+ }else{
212
-
200
+
213
- $('.FixedF_M').css('display','none');
201
+ $('.FixedF_M').css('display','none');
214
-
202
+
215
- }
203
+ }
216
-
204
+
217
- });
205
+ });
218
206
 
219
207
  </script>
220
208
 
209
+
210
+
221
211
  </body>
222
212
 
223
213
  </html>
@@ -258,10 +248,6 @@
258
248
 
259
249
  transition: .4s margin ease-out;
260
250
 
261
-
262
-
263
-
264
-
265
251
  }
266
252
 
267
253
 
@@ -274,8 +260,6 @@
274
260
 
275
261
 
276
262
 
277
-
278
-
279
263
  .FixedF_M{
280
264
 
281
265
  display: flex;
@@ -298,6 +282,8 @@
298
282
 
299
283
  }
300
284
 
285
+
286
+
301
287
  .FixedF_M .fa-phone,.fa-arrow-up,.fa-map-marker-alt {
302
288
 
303
289
  font-size: 3em;
@@ -312,8 +298,6 @@
312
298
 
313
299
 
314
300
 
315
-
316
-
317
301
  .FixedF_M span {
318
302
 
319
303
  display: block;
@@ -326,6 +310,8 @@
326
310
 
327
311
  }
328
312
 
313
+
314
+
329
315
  .FixedF_M a {
330
316
 
331
317
  text-decoration: none;

1

必要項目のみ

2019/05/04 04:25

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -200,17 +200,17 @@
200
200
 
201
201
  || navigator.userAgent.indexOf('Android') > 0) {
202
202
 
203
- var bH = $('.FixedfooterMenu').height();
203
+ var bH = $('.FixedF_M').height();
204
204
 
205
205
  $('body').css('margin-bottom',bH+'px');
206
206
 
207
- $('.FixedfooterMenu').css('visibility','visible');
207
+ $('.FixedF_M').css('visibility','visible');
208
208
 
209
209
 
210
210
 
211
211
  }else{
212
212
 
213
- $('.FixedfooterMenu').css('display','none');
213
+ $('.FixedF_M').css('display','none');
214
214
 
215
215
  }
216
216
 
@@ -276,7 +276,7 @@
276
276
 
277
277
 
278
278
 
279
- .FixedfooterMenu{
279
+ .FixedF_M{
280
280
 
281
281
  display: flex;
282
282
 
@@ -290,23 +290,19 @@
290
290
 
291
291
  bottom:0;
292
292
 
293
- z-index: 9999;
294
-
295
293
  text-align:center;
296
294
 
297
- background-color:#f0ede9;
295
+ background-color:black;
298
296
 
299
297
  justify-content: space-around;
300
298
 
301
- box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.2);
302
-
303
- }
299
+ }
304
-
300
+
305
- .FixedfooterMenu .fa-phone,.fa-arrow-up,.fa-map-marker-alt {
301
+ .FixedF_M .fa-phone,.fa-arrow-up,.fa-map-marker-alt {
306
302
 
307
303
  font-size: 3em;
308
304
 
309
- color: #f39a26;
305
+ color: white;
310
306
 
311
307
  padding: 10px;
312
308
 
@@ -318,7 +314,7 @@
318
314
 
319
315
 
320
316
 
321
- .FixedfooterMenu span {
317
+ .FixedF_M span {
322
318
 
323
319
  display: block;
324
320
 
@@ -330,15 +326,13 @@
330
326
 
331
327
  }
332
328
 
333
- .FixedfooterMenu a {
329
+ .FixedF_M a {
334
330
 
335
331
  text-decoration: none;
336
332
 
337
333
  font-weight: bold;
338
334
 
339
- text-shadow:1px 1px 5px #fff, 2px 2px 5px #888;
340
-
341
- color:black;
335
+ color:white;
342
336
 
343
337
  }
344
338