ヘッダーをfixedにするときに心掛けて欲しい、たった2つのこと 2️⃣

DEMO

ヘッダーってfixedで実装されることが多いのですが、個人的には2つだけ心掛けて欲しいことがありまして、例えば、コードレビューのレビュアーになることがあったら、少なくとも❶は確実に指摘します。❷はデザイン次第で指摘します。

❶ 縦方向はfixedでも横方向にはスクロールして欲しい

DEMOを見て頂くとわかるのですが、コンテンツのmin-widthを980pxにしているので、windowの横幅が980pxより小さくなると、右端から徐々に見えなくなっていきます。

そして、870pxより小さくなると、Cボタンが完全に隠れ、645px以下になると全てのボタンが隠れます。

その際、ヘッダーを単純にfixedで実装してしまうと、横にスクロールできないためボタンが押せずに困ってしまうことになるでしょう。

これは困ります。では、どうすれば良いのか。

JavaScriptでwindowのスクロールイベントを監視し、ヘッダーのポジションをずらすなどして、横方向にはスクロールするようにしましょう。

JavaScript

class Header {
  constructor(selector) {
    const _handleScroll = () => {
      this.setLeft(-window.scrollX);
    };

    this.elm = document.querySelector(selector);

    window.addEventListener('scroll', _handleScroll);
  }

  setLeft(left) {
    this.elm.style.left = `${left}px`;
  }
}

new Header('.header');

動作の様子

これはマストで実装して欲しいです。

❷ ヘッダー裏のコンテンツはヘッダーの高さから始めて欲しい

一方でこちらはデザインに依存するのですが、ページの一番上にいるにも関わらず、ヘッダーの裏にコンテンツが回り込んでしまって見えないという事態を避けて欲しいです。
ヘッダーを半透明にして敢えて裏に回り込ませる的なデザインの時もあるので、時と場合によります。

一番簡単な実装方法は、fixedにした要素をrelativeの要素でラップして、高さを揃えるという実装かと思われます。
コードにすると、こんな感じです。

CSS

.header {
  $height: 70px;

  position: relative;
  width: 100%; height: $height;
  
  .inner {
    position: fixed;
    min-width: 980px;
    width: 100%; height: $height;
  }
}

動作の様子

relativeの要素でラップすることによって、その高さ分、裏のコンテンツの開始位置を下げることができます。
繰り返しになりますが、こちらはデザインに依存するのでマストではありません。



以上、「ヘッダーをfixedにするときに心掛けて欲しい、たった2つのこと」でした。
こちらからは以上です。