###前提・実現したいこと
楽天ショップのスマートホン商品ページにて
ヘッダーにフィックスさせた検索窓を実装しようと試行錯誤しています。
iosの既知の問題である
「fixedしている要素内のinputにフォーカスが入ると、ページトップへスクロールしてしまう」
というところをまずは解消しました。
結果発生した問題となります。
###発生している問題
楽天がデフォルトで実装している、
お買物カゴへページ内遷移するボタンが表示されません。
当店の商品ページ
現状はこのような形で、ヘッダーにフィックスさせた状態で、
iosのページトップへ戻ってしまう問題も回避できておりますが、
その結果スクロール後に表示される
「お買物カゴ」ボタンが表示されなくなってしまいました。
他店舗さまの商品ページ
他店舗様では問題なく、スクロール後に「お買物カゴへ」ボタンが
右下に表示されるかと思います。
恐らくはiosのバグを解消するために設定したこちらのcssが原因では、
と思っているのですが、いかんせん解決策がわかりません。
CSS
1html, body { 2 height:100%; 3} 4
以下のページ内で指定しているCSSを記載します。
###ソースコード
CSS
1/*検索ボックスの親*/ 2#rstTopSearch { 3 position:fixed; 4 top:0; 5 left:0; 6 width:100% !important; 7 padding:0 !important; 8 z-index:9999; 9} 10 11/* 12全体の親要素を絶対位置表示、 13高さをディスプレイいっぱいに広げ 14その中でコンテンツをスクロールさせています。 15*/ 16article.current { 17 position:absolute; 18 top:0; 19 right:0; 20 bottom:0; 21 left:0; 22 overflow-y:scroll; 23 -webkit-overflow-scrolling: touch; 24 height:100%; 25} 26 27/* 28上記CSSを生かすために 29HTMLとbodyにも高さを指定しています。 30*/ 31html, body { 32 height:100%; 33} 34
###最後に
ヘッダーに検索窓をフィックスさせ、iosのバグを回避した状態までは来ることが出来ました。
最後にこのお買物カゴへの遷移ボタンが通常通り表示、機能してくれれば、
目指す要件をすべて実装できる、というような段階です。
どなたか回避策や案などをお持ちの方。
お知恵を貸していただければ幸いです。
宜しくお願いします。
━━━━━━ここから追記━━━━━━
2016.03.16.18:10
現在試行錯誤しながら進めているためページ内の状況が元のものから変更されております。
また時間をおいて元に戻しますのでその際にお力添えいただければ幸いです。
━━━━━━ここから追記━━━━━━
2016.03.17.13:34
質問当初のページ内容に戻しました。
引き続きお力添えいただければ幸いです。
宜しくお願いします。
回答2件
あなたの回答
tips
プレビュー