用途
新着
履歴
分類

CSS ヘッダー固定

CSS ヘッダー固定
ヘッダーやフッターなど、バナーやメニューを簡単に固定できるCSSのposition:stickyのサンプルです。

以下のようにヘッダーにdiv要素で画像やメニューなどを簡単に固定できるスタイルの紹介です。

以前はこのようなことがやりたくてもz-indexやfixedで表現してましたが、簡単なスタイルでいけるようになりました。

まずはサンプルをご覧ください。

sticky
↑ヘッダーに固定する
とても簡単に位置指定ができる
・・・
さあ、レッツスクロール
・・・
・・・
いままでは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や大きなレイアウトの要素に指定すれば、いろんなところに固定できるます。

古いブラウザには対応してませんが、画面の大きくなったスマホには多いに使い所が見込まれます。

公開 2019-07-28 13:37:32
このページの二次元コード
CSS ヘッダー固定

人気のサンプル

search -  category -  about
© 2024 kipure
Top