【CSS】position:sticky;で簡単固定!スティッキーヘッダー6選

【CSS】position:sticky;で簡単固定!スティッキーヘッダー6選

どうも、ジャングルオーシャンのミケです。

今日はHTMLCSSで簡単にできる

スティッキーヘッダーを作っていこうと思うよ。




スティッキーヘッダーとは

Webサイトは基本的に

縦の長さを固定で決めるという事はなくて

コンテンツが多くなればなるほどスクロールする長さは多くなりがちなんだ。

その時に

「ヘッダーにナビゲーションの要素がつまっていて、サイト内の回遊を促すためにもずっとユーザーの目に触れるところに置いておきたい!」

と考えることもあるはず!

その願いを叶えてくれるのがスティッキーヘッダーというわけなんだ。

具体的なイメージは用意したサンプルデモページを見てね。

サンプル1のデモページはこちら

固定させる方法

固定をさせるためには

CSSpositionを使うよ。

positionにも何種類かあって

コンテンツを固定できるのはfixedsticky

ブラウザで表示している領域の1番上にheaderを固定させる時の

CSSの記述方法はそれぞれ↓の通り

fixedの場合は

stickyの場合は

こういう書き方になるよ。

topというのは1番上からの距離を表しているから0をつけると1番上からの距離がゼロの位置に配置するという事になる。

ということは、position:sticky;と合わせると「1番上に固定する」という意味の記述になるよ。

もし、少し隙間をあけたければ0になっている所を10pxにすれば

10pxの隙間ができるよ。

ただ、fixedの場合、ページが読み込まれた段階で固定されてしまうから

スクロールによって、任意の場所で固定したい場合はJavaScriptと組み合わせて使うんだ。

でも、CSS3stickyが出た事によって

JavaScriptを使わなくても追尾するコンテンツが簡単に作れるようになったんだ。

だから今回は、HTMLCSSだけで簡単に実装できるstickyを使ったサンプルを用意したよ。

対応ブラウザについて

stickyの対応ブラウザは下記の通り

caniuseのsticky

Can I useで確認する

画像は記事作成時点のものになります。

結果を見てもらったらわかると思うけど

stickyは対応していたりしていなかったりするブラウザがあるんだ。

さっきのサンプルでも書いたけど、Safari用にベンダープレフィックス-webkit-は必要だからね。

あと、IEの対応をしていないのでこの点は注意してね!

MicrosoftがIEよりEdgeの使用を推奨しているから

今後はIEの対応も気にしなくてよくなりそうだけどね。

Internet Explorerの今後について

そのことも踏まえてstickyを使うか使わないか

今の状況も合わせて決めてね。

それじゃサンプルデモいってみよう!

サンプルデモの解説

1.ヘッダーを固定

HTML

CSS

サンプル1のデモページを見る

さっき例で示したCSSと同じ記述だよ。

2.フッターを固定

HTML

CSS

サンプル2のデモページを見る

フッターを固定する場合はtopbottomに変更するとコンテンツをブラウザの1番下からの距離をゼロにするという事になるから、ブラウザの下に固定される事になるよ。

3.サイドバーを固定

HTML

CSS

サンプル3のデモページを見る

.main.sidedivタグで囲んで、.sidestickyで固定させているよ。

4.横幅が決まっている場合のナビゲーションを固定

HTML

CSS

サンプル4のデモページを見る

横幅は1000pxに設定して固定させているよ。

5.横幅に合わせて可変するナビゲーションを固定

HTML

CSS

サンプル5のデモページを見る

ブラウザの横幅に合わせて可変するナビゲーションだよ。レスポンシブデザインで使えるね!

6.横幅を短くすると横スクロールになるナビゲーションを固定

HTML

CSS

サンプル6のデモページを見る

ブラウザの横幅が767px以下になるとナビゲーションが横スクロールできるようにoverflow-xで設定しているよ。こちらもレスポンシブデザインで使えるね!

最後に

これでスティッキーヘッダーの説明は終わりだよ。

stickyはたった3行で簡単に実装できるから便利だよね!

もし、実装できないとか、おかしいコードとかあれば連絡待ってるよ!

それじゃ、また今度ね!




プログラミングカテゴリの最新記事