以下のようにヘッダーにdiv要素で画像やメニューなどを簡単に固定できるスタイルの紹介です。
以前はこのようなことがやりたくてもz-indexやfixedで表現してましたが、簡単なスタイルでいけるようになりました。
まずはサンプルをご覧ください。
sticky
↑ヘッダーに固定する
とても簡単に位置指定ができる
・・・
さあ、レッツスクロール
・・・
・・・
いままではz-indexとか
positionの
reteralとか
absoluteとか
fixedとか
いろいろ駆使して
大変だったなー
・・・
でもこれからは
これだけかければOK
便利な世の中になったもんだ。
そのぶん
ほかのところに
手間がかけられる
ってもんだ。
・・・
とても簡単に位置指定ができる
・・・
さあ、レッツスクロール
・・・
・・・
いままではz-indexとか
positionの
reteralとか
absoluteとか
fixedとか
いろいろ駆使して
大変だったなー
・・・
でもこれからは
これだけかければOK
便利な世の中になったもんだ。
そのぶん
ほかのところに
手間がかけられる
ってもんだ。
・・・
こんな感じで親要素の中の子要素を固定することができます。
CSSはこちら
<style> .demo_item{ position: -webkit-sticky; position: sticky; top:0; height:50px; line-height:50px; text-align:center; opacity: 0.8; background-color: #F99; } .demo_box{ height:300px; width:200px; overflow-y:scroll; margin:0 auto; box-shadow: 3px 3px 5px #999 inset; } </style>
HTMLはこちら
<div class="demo_box"> <div class="demo_item">sticky</div> <div class="demo_body"> ↑ヘッダーに固定する<br> とても簡単に位置指定ができる<br> ・・・<br> さあ、レッツスクロール<br> ・・・<br> ・・・<br> いままではz-indexとか<br> positionの<br> reteralとか<br> absoluteとか<br> fixedとか<br> いろいろ駆使して<br> 大変だったなー<br> ・・・<br> でもこれからは<br> これだけかければOK<br> 便利な世の中になったもんだ。<br> そのぶん<br> ほかのところに<br> 手間がかけられる<br> ってもんだ。<br> ・・・<br> </div> </div>
大事なのは以下の部分。
position: -webkit-sticky; position: sticky; top:0;
これを割り当てた要素は、親の要素に対して、位置を指定することができます。
(2019/7時点:iOSはまだ「-webkit-」をつける必要があるようです。)
つまり、bottom:0pxでフッターに吸着します。
bodyや大きなレイアウトの要素に指定すれば、いろんなところに固定できるます。
古いブラウザには対応してませんが、画面の大きくなったスマホには多いに使い所が見込まれます。