🌄

コンテンツがスクロールしてる時だけヘッダ部に影をつける

2022/05/30に公開

CSS

今回紹介する内容

Chrome拡張で作っているRSS-Readerで「ページがスクロールしたときにヘッダに影をつける。」「記事がスクロールしたときにタイトルの下に影をつける。」といったようにスクロールに応じて影を追加している処理をどのように実装しているか紹介します。

やりたいこと

コンテンツ部がスクロールしてる時だけヘッダに影を付けたい。
コンテンツのスクロールが一番上に戻ってきたらまた影を消したい。

実装方法

JavaScriptでスクロールイベントを検知。
jQueryを利用してCSSのクラスを追加・削除して影のON/OFFを切り換える。
スクロールしている ⇨ CSSクラスを追加=影をつける
スクロールしていない ⇨ CSSクラスを削除=影を消す

サンプル

全体のソースはGitHubに公開しています。

動作イメージこんな感じです。青いヘッダ部の下のコンテンツ領域を縦にスクロールしてみてください。

HTMLの解説

HTMLは以下の様にヘッダ部headerタグとコンテンツ部mainタグとして説明しますが、必ずしもこのタグでなくても構いません。divタグでももちろんOKです。

index.html

  ... 略 ...
  <header>
  ... 略 ...
  </header>
  <main>
  ... 略 ...
  </main>
  ... 略 ...

スタイルシートの解説

CSSで事前にスタイルシートで影付き用のスタイルを定義します。
ここではクラスwith-scrollを付けると影をつけるようにしています。
これは次で説明するJavaScriptで付けたり削除したりしているクラス名と一致させます。
この辺のクラス名はお好みで変えてください。

style.css

header {
  ... 略 ...
  position: relative; /* これがないとz-indexが効かない */
  z-index: 104; /* mainよりz-indexが上に来ないと影がmainで消えてしまう*/
                /* 104は適当な値ですmainより前になればなんでも良いです。 */
}

/* 影をつける部分お好みで変えてください */
header.with-scroll {
  box-shadow:rgb(0 0 0 / 20%) 0px 2px 4px -1px,
             rgb(0 0 0 / 14%) 0px 4px 5px 0px,
             rgb(0 0 0 / 12%) 0px 1px 10px 0px;
}

main {
  ... 略 ...
  overflow-y: scroll; /* コンテンツがはみ出たらスクロール */
  ... 略 ...
}

JavaScriptの解説

次のJavaScriptは一度だけ実行するようにしてください。
スクロールのイベントでスクロールの位置を判定。
スクロールがTOPでなければwith-scrollクラスを追加
そうでなければwith-scrollクラスを削除しています。

main.js

const jHeader = $('header') // 影をつける対象
const jMain = $('main')     // スクロール判定する対象

// スクロールイベント
jMain.scroll(() => {
  if (jMain.scrollTop()) {
    // スクロールの位置がトップではない
    // ⇨影をつける
    // なおjQueryのaddClassはクラス名が重複しないようにしてくれ
    jHeader.addClass('with-scroll')
  } else {
    // スクロールの位置がトップにある
    // ⇨影を消す
    // なおjQueryのremoveClassはクラス名がなければ何もしない
    jHeader.removeClass('with-scroll')
  }
})

最後に

スクロール時に影をつける処理のご紹介でした。