サイド固定ヘッダーの実装

迷える黒猫くん

サイトのトップページなどでたまに見るサイドに固定されたヘッダーを実装してみたいけど難しのかニャ。。　

いえ！全然難しいことはありません。非常に簡単に実装可能ですのでやってみましょう。

ただその前にサイドに固定されたヘッダーという言葉はなんだかとても矛盾してますね。実際に作成したデモ画面を見てみましょう。

こちらが今回実装したデモページになります。

以前作成した動画を全画面表示でトップに表示させるとデモページ、またそれ自体もスマホでもパララックスを実装するこちらのデモページを土台に作ってます。

今回は特に設置してませんが左の固定ヘッダーにグローバルナビゲーションなども設置することが多いです。
基のコードはそれぞれこちらの記事を参照して下さい。

動画を全画面表示にしてトップに固定する。

メインビジュアルの見せ方として最近は画像を画面いっぱいに表示するようなダイナミックな手法が増えてきました。その中でも動画を使った見せ方はユーザーの興味をより引きやすく人気があります。ここでは動画を全画面表示にしてトップに固定方法を解説していきます！

パララックス効果をスマホでも実装する（CSSのみ）

パララックス効果を簡単に実装できるCSSプロパティとして background-attachment: fixed; があります。しかし、こちらのやり方ではiOS の Safari には対応できていないため、今回紹介するclip-pathプロパティを用いて背景を矩形に切り抜くやり方でスマホ対応のパララックスページを実装していきます。

今回上のデモから変更したのはたった数行ですので早速見て行きましょう！

コード

まずheaderをトップからサイドに動かしたいのでこちらのCSSのコードを書き換えます。

header {
    position: absolute;　→　fixed;
    top: 0;
    left: 0;
    width: 100%;　→　200px;
    height: 60px;　→  100vh;
    background-color: #fff;
    z-index: 1;
    box-shadow: 3px 3px 10px rgba(0,0,0,.5);　→　今回追加
}

こちらでサイドに固定されたサイド固定のヘッダーは完成しましたが、ヘッダーにコンテンツが被ってしまっているので、左に固定ヘッダー分のパディングを指定します。

.wrapper {
    width: 100%;
    padding-left: 200px;　→　今回追加 
}

こちらで完成ですが、背景に指定した3枚の画像は絶対位置でleft: 0; に指定してあるため少し位置がずれて見えるためこちらもleft: 200px;にしてあげましょう。

section .imageBg {
  position: fixed;
  top: 0;
  left: 0;　→　200px;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
}

こちらで完成です！あとは画像幅が狭くなった時にはレフトヘッダーは邪魔になるので画面幅が1,200px以下になったらヘッダーを上に戻してあげるようメディアクエリを使って指定しましょう。

@media (max-width: 1200px) {
  .wrapper {
    padding-left: 0;
  }
  header {
    width: 100%;
    height: 65px;
  }
  section .imageBg {
    left: 0;
  }
}

こちらで完成です！！普通の作りのサイト構成に飽きた人はぜひこちらを参考に作ってみてください！