画面をスクロールしたら固定ヘッダーに境界線がつくUIをCSSのみで実現する

画面をスクロールしたら固定ヘッダーに境界線がつくUIをCSSのみで実現する方法を紹介します。どんな時にそのようなUIを採用したくなるかというと、画面が読み込まれた直後はヘッダーとコンテンツの境界をシームレスに表現したいが、スクロールをしたらヘッダーが重なるので境界をはっきりさせたい。そんなときです。

これを実現したいと思った時にパッと思いつく方法は、スクロールされたかどうかをJavaScriptでチェックしてclassを付与するという方法ですが、この記事で紹介する作り方をすればCSSだけで実現できます。

以下のデモ画面をスクロールしてみてください。

JavaScriptを利用せずにCSSだけで実現しているのでいくつか制約がありますが、これらの制約を受け入れられるのであれば、JavaScriptを書かなくてもいいのでおすすめです。

境界線を表示するタイミングはスクロール直後である
背景色がベタ塗りである必要がある

コードサンプル

では、どのように実現しているのかを見ていきましょう。コードを見た方が理解が早いと思うので、まずはコードをご覧いただきます。必要なところだけに絞っているので、完全なサンプルはCodePenのデモを参照してください。

HTMLはこうです：

<div id="container">
  <header>Title</header>
  <div id="border"></div>
  <div id="article">
    <div></div>
    <div></div>
    <div></div>
    ...
  </div>
</div>

この例だと、div#border が境界線になります。

そしてSCSSはこちら：

$header-height: 50px;

#container {
  padding-top: $header-height;
}

header {
  height: $header-height;
  background: #fff;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2;
}

#border {
  position: relative;
  z-index: 1;
  &::before,
  &::after {
    content: "";
    width: 100%;
  }
  &::before {
    position: fixed;
    border-bottom: 1px solid gray;
  }
  &::after {
    position: absolute;
    border-bottom: 1px solid white;
  }
}