0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-01-19

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

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

CSSでアイコンの位置を、

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

と設定していた。

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

そこでウインドウサイズは関係なしで、シンプルにCSSへ

style.css
bottom: 70px;

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?