質問編集履歴

2

cofcof

cofcof score 24

2016/12/14 00:07  投稿

モバイルブラウザでの高さの可変による挙動の不安定さを解消したい
###前提・実現したいこと
モバイルブラウザに全画面でヘッダーを表示し、スクロールするとフッターにメニューが表示されて固定されるものを作ろうとしています。
PCでは問題なくできたのですが、Safari、Chromeなどのモバイルブラウザの場合、アドレスバーや下部のボタンなどがスクロール状況により表示されるため、メニューの挙動が安定しません。
解決方法を教えていただけるとありがたいです。
###該当のソースコード
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
   var height = $('footer').height();
 $(window).on('scroll', function() {
   if ($(this).scrollTop() > height) {
     $('footer').addClass('fixed');
   } else {
     $('footer').removeClass('fixed');
   }
 });
});
</script>
<style>
*{
   margin:0;
   padding:0;
}
header {
   height:100vh;
   background:#f00;
}
main {
   padding-bottom:100px;
}
footer {
   position: absolute;
   width:100%;  
   min-width:320px;  
   height:100px;
   bottom:-100px;
   background:#999;
}
.fixed {
   position: fixed;
   bottom: 0;
}
</style>
</head>
<body>
<header>
全画面表示
</header>
<main>
なんらかのコンテンツ<br>
なんらかのコンテンツ<br>
なんらかのコンテンツ<br>
なんらかのコンテンツ<br>
なんらかのコンテンツ<br>
なんらかのコンテンツ<br>
</main>
<footer>
footer固定メニュー
</footer>
</body>
</html>
  • HTML

    23397 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    16671 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Android

    10171 questions

    Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

  • iPhone

    1738 questions

    iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

1

cofcof

cofcof score 24

2016/12/13 21:43  投稿

モバイルブラウザでの高さの可変によるズレを解消したい
モバイルブラウザでの高さの可変による挙動の不安定さを解消したい
###前提・実現したいこと
モバイルブラウザに全画面でヘッダーを表示し、スクロールするとフッターにメニューが表示されて固定されるものを作ろうとしています。
PCでは問題なくできたのですが、Safari、Chromeなどのモバイルブラウザの場合、アドレスバーや下部のボタンなどがスクロール状況により表示されるため、メニューの挙動が安定しません。
解決方法を教えていただけるとありがたいです。
###該当のソースコード
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
var height = $('footer').height();
$(window).on('scroll', function() {
if ($(this).scrollTop() > height) {
$('footer').addClass('fixed');
} else {
$('footer').removeClass('fixed');
}
});
});
</script>
<style>
*{
margin:0;
padding:0;
}
header {
height:100vh;
background:#f00;
}
main {
padding-bottom:100px;
}
footer {
position: absolute;
width:100%;
min-width:320px;
height:100px;
bottom:-100px;
background:#999;
}
.fixed {
position: fixed;
bottom: 0;
}
</style>
</head>
<body>
<header>
全画面表示
</header>
<main>
なんらかのコンテンツ<br>
なんらかのコンテンツ<br>
なんらかのコンテンツ<br>
なんらかのコンテンツ<br>
なんらかのコンテンツ<br>
なんらかのコンテンツ<br>
</main>
<footer>
footer固定メニュー
</footer>
</body>
</html>
  • HTML

    23397 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    16671 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Android

    10171 questions

    Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

  • iPhone

    1738 questions

    iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る