質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Android

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

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

Q&A

解決済

1回答

3057閲覧

スマホサイトでの固定ヘッダーの挙動について

退会済みユーザー

退会済みユーザー

総合スコア0

Android

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/02/15 06:13

編集2018/02/16 03:31

##状況
下記のサイトを参考に固定ヘッダーを設置してみました。
https://item.rakuten.co.jp/drinkshop/1480180/

iPhoneでの動作検証は行い問題なかったのですがandroid(SCL43)で検証したところスクロールするところまではだいじょうぶでした。
しかし検索窓に文字を一文字入れた瞬間にヘッダーの固定が解除されて隠れてしまいます。
文字の入力は行えますが確認できないのでユーザー的には使いにくいと思います。

##求めるもの
固定解除を防ぐ方法はありませんか?

##コード

css

1固定ヘッダー{ 2 position:fixed; 3 top:0; 4 left:0; 5 z-index:1; 6 margin:0; 7 padding:0; 8 display:block; 9 width:100%; 10 height:123px; 11}

##追記
こちらの都合上なかなか情報提示が難しいのですが参考サイトのソースを載せます。
発生している症状が同じなのでおそらくこちらをandroidで確認していただければわかりやすいかと思います。
よろしくお願いします!

html

1<style> 2@charset "euc-jp"; 3/* -------------------------------- 4 BoxSizeSetting 5-------------------------------- */ 6 7*, *:before, *:after { 8 -webkit-box-sizing: border-box; 9 -moz-box-sizing: border-box; 10 box-sizing: border-box; 11} 12/* -------------------------------- 13 MarginSetting 14-------------------------------- */ 15 16body, h1, h2, h3, h4, h5, h6, p, address, blockquote, pre, div, dl, dt, dd, ol, ul, li, th, td, form, fieldset, input, textarea { 17 margin: 0 0 0 0; 18 padding: 0 0 0 0; 19} 20select { 21 margin: 0 0 0 0; 22} 23/* -------------------------------- 24 HtmlTagSetting 25-------------------------------- */ 26html, body { 27 height: 100%; 28 position: relative; 29} 30html { 31 font-size: 62.5%; 32} 33 34body { 35 width: 100%; 36 height: 100%; 37 font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, " メイリオ", Meiryo, Osaka, " MS Pゴシック", MS PGothic, " sans-serif"; 38 font-size: 1.4rem; 39 line-height: 1.5em; 40 color: #444444; 41 position: relative; 42} 43img { 44 border: 0 none; 45 vertical-align: bottom; 46} 47ul { 48 font-size: 0; 49 margin:0; 50 padding:0; 51} 52article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 53 display: block; 54 margin: 0 0 0 0; 55 padding: 0 0 0 0; 56} 57a, a:visited { 58 text-decoration: none; 59 color: #444; 60} 61/* -------------------------------- 62 ClassSetting 63-------------------------------- */ 64.clearfix { 65 *zoom: 1; 66} 67.clearfix:after { 68 content: ''; 69 display: table; 70 clear: both; 71} 72.clear { 73 clear: both; 74} 75/* -------------------------------- 76 HeaderSetting 77-------------------------------- */ 78header { 79 padding: 10px 0 0 10px; 80 background: #262626; 81 width: 100% 82} 83/* -------------------------------- 84 LayoutSetting 85-------------------------------- */ 86#spHeader { 87 position: fixed; 88 z-index: 999; 89 top: 0; 90 width: 100% 91} 92#spContents { 93 margin: 11rem 0 0 0; 94} 95/* -------------------------------- 96 SearchSetting 97-------------------------------- */ 98#spSearch { 99 border-bottom: 1px solid #ccc; 100 border-top: 1px solid #ccc; 101} 102#spSearchIn { 103 margin: 5px 0; 104 padding: 10px 0; 105 background: #f6f6f6; 106} 107#search-sp { 108 margin: 0 auto; 109 border: solid #ccc 1px; 110 height: 39px; 111 width: 95%; 112 position: relative; 113 background: #fff; 114} 115#search-sp #txt-area { 116 font-size: 16px; 117 border: none; 118 padding: 1.5% 3% 2% 3%; 119 width: 85%; 120 border: none; 121} 122#search-sp #search-btn { 123 background: url('img/icon_search.gif') no-repeat 50% 50%, #333333; 124 background-size: 70%, 100%; 125 border-radius: 3px; 126 width: 35px; 127 height: 35px; 128 position: absolute; 129 right: 1px; 130 top: 1px; 131 border: none; 132} 133/* -------------------------------- 134 rmsHeaderSetting 135-------------------------------- */ 136#rmsHead { 137 background: #262626; 138} 139#rmsHead #rmsLogo { 140 width: 30%; 141 display: inline-block; 142} 143@media screen and (max-width: 500px) { 144 width: 30%; 145} 146#rmsHead #rmsLogo img { 147 width: 100%; 148} 149#rmsHead header ul { 150 width: 68%; 151 display: inline-block; 152 vertical-align: top; 153 margin: 0 0 0 0; 154 overflow:hidden; 155} 156#rmsHead header ul li { 157 display: inline-block; 158 width: calc(100% / 4); 159} 160#rmsHead header ul li img { 161 width: 100%; 162 display: block; 163} 164#rmsHead #spSearch { 165 border: none!important; 166} 167#rmsHead #spSearchIn { 168 margin: 0!important; 169} 170</style> 171<script type="text/javascript" async="" defer="" src="//r.r10s.jp/com/rat/js/ral-1.0.21.js"></script><script type="text/javascript"> 172function iframeResize(){ 173var PageHight = document.body.scrollHeight +0;// ページの高さを取得 174window.parent.document.getElementById('spHeaderFrame').style.height = PageHight + 'px'; // iframeの高さを変更 175}window.onload = iframeResize; 176</script> 177<script type="text/template" name="rat" id="ratAccountId" value="1"></script> <script type="text/template" name="rat" id="ratServiceId" value="5"></script> <script type="text/template" name="rat" id="ratSiteSection" value="gold"></script> <script type="text/template" name="rat" id="ratAdobeSiteSection" value="shop"></script> <script type="text/template" name="rat" id="ratPageType" value="gold"></script> <script type="text/javascript" src="https://r.r10s.jp/com/rat/js/rat-cdn.js" async="" defer=""></script></head> 178<body> 179<div id="rmsHead"> 180 181 <!--ヘッダー--> 182 <header class="clearfix"> 183 <section id="rmsLogo"> <a href="https://www.rakuten.ne.jp/gold/drinkshop/" target="_top"> <img src="img/logo.png"> </a> </section> 184 <ul> 185 <li><a href="https://www.rakuten.ne.jp/gold/drinkshop/mail/180215g.html" target="_top"><img src="img/sale2.png"></a></li> 186 <li><a href="https://www.rakuten.ne.jp/gold/drinkshop/frame/shop_daily_rankink_sp.html" target="_top"><img src="img/rank2.png"></a></li> 187 <li><a href="https://item.rakuten.co.jp/drinkshop/c/0000006887#itemtop" target="_top"><img src="img/zaiko2.png"></a></li> 188 <li><a href="https://www.rakuten.ne.jp/gold/drinkshop/frame/cat/topic/guide/guide_index.html" target="_top"><img src="img/guide2.png"></a></li> 189 </ul> 190 </header> 191 <!--検索窓--> 192 <div id="spSearch"> 193 <div id="spSearchIn"> 194 <div id="search-sp" class="clearfix"> 195 <form action="//esearch.rakuten.co.jp/rms/sd/esearch/vc" method="get" target="_top"> 196 <input type="hidden" name="sv" value="6"> 197 <input type="hidden" name="sid" value="213103"> 198 <input type="hidden" name="su" value="/gold/drinkshop/"> 199 <input type="hidden" name="sn" value="ドリンク屋"> 200 <input type="text" placeholder="キーワードで探す" value="" onfocus="if( this.value == 'ショップ内から商品を探す' ) { this.value = ''; } " onblur="if( this.value == '' ) { this.value = 'ショップ内から商品を探す; } " id="txt-area" name="sitem"> 201 <input type="submit" value="" id="search-btn" alt="検索する"> 202 </form> 203 </div> 204 </div> 205 </div> 206</div> 207<script type="text/javascript" src="https://r.r10s.jp/com/js/d/pa/pa3.min.js" async="" defer=""></script> 208 209</body></html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/02/15 06:22 編集

ご提示の情報だけでは現象の再現確認が難しいです。HTMLも含めたソースコードもご提示いただくとか、iOS・Androidでのスクリーンショットを添付するとか、もう少し情報をご提示いただければと思います。
guest

回答1

0

ベストアンサー

根本的な解決ではありませんが
androidのみ検索窓などのinputを非表示にしました。

これで安定して動作しているので様子見ですね。

ありがとうございました!

投稿2018/02/20 00:00

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問