以下のようにヘッダーに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や大きなレイアウトの要素に指定すれば、いろんなところに固定できるます。
古いブラウザには対応してませんが、画面の大きくなったスマホには多いに使い所が見込まれます。
