Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 9004

【スマホ】トップへ戻るナビを画面下部に固定する場合

$
0
0

画面を少しスクロールした後で「トップページへ戻る」アイコンを画面の下部にフェードイン表示させる。

この場合、Javascriptでウインドウの高さ・幅を取得した後、

CSSでアイコンの位置を、

style.css
top:ウインドウの高さ-70pxleft:ウインドウの幅-70px

と設定していた。

スマホのブラウザ(AndroidのChrome、Operaで確認)はある程度下へスクロールするとアドレスバーが自動的に隠れる仕様になっている。
隠れる時(下へスクロールする時)は問題ないけど、再び表示されるとき(上へスクロールする時)に、アイコンの位置がずれることに気が付いた。

そこでウインドウサイズは関係なしで、シンプルにCSSへ
css:style.css
bottom: 70px;

と設定したところ、うまくいった。


Viewing all articles
Browse latest Browse all 9004

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>