一定量スクロールするとヘッダやツールバーがスクロールせずに固定される枠の作成 - JavaScript

一定量スクロールするとヘッダやツールバーがスクロールせずに固定される枠を作成するコードを紹介します。

補足

jQueryを利用するほうが簡単に実装できます。jQueryを利用した実装はこちらの記事を参照してください。

プログラム

コード

下記のHTMLファイルCSSファイルを記述します。

FixedHeader.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
	<meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="FixedHeader.css"/>
  <script type="text/javascript">
    window.onscroll = function () {
      var fixedBarObj = document.getElementById("fixedbar");
      if (document.documentElement.scrollTop > 96) {
        fixedBarObj.className = "fixed";
      } else {
        fixedBarObj.className = "";
      }
    }
  </script>
</head>
<body>
  <div class="header">ヘッダ</div>

  <div id="fixedbar">固定のバー</div>
  <div class="fixedbarReserved"></div>

  <div>
    <div style="height:60px;background-color:#ff7070">コンテンツ</div>
    <div style="height:60px;background-color:#ff708e">コンテンツ</div>
    <div style="height:60px;background-color:#ff70a9">コンテンツ</div>
    <div style="height:60px;background-color:#ff70d2">コンテンツ</div>
    <div style="height:60px;background-color:#ff70e9">コンテンツ</div>
    <div style="height:60px;background-color:#d870ff">コンテンツ</div>
    <div style="height:60px;background-color:#bd70ff">コンテンツ</div>
    <div style="height:60px;background-color:#9f70ff">コンテンツ</div>
    <div style="height:60px;background-color:#7370ff">コンテンツ</div>
    <div style="height:60px;background-color:#709cff">コンテンツ</div>
    <div style="height:60px;background-color:#70ceff">コンテンツ</div>
    <div style="height:60px;background-color:#70ffe6">コンテンツ</div>
    <div style="height:60px;background-color:#70ffbd">コンテンツ</div>
    <div style="height:60px;background-color:#70ff88">コンテンツ</div>
    <div style="height:60px;background-color:#8bff70">コンテンツ</div>
    <div style="height:60px;background-color:#b7ff70">コンテンツ</div>
    <div style="height:60px;background-color:#d8ff70">コンテンツ</div>
    <div style="height:60px;background-color:#fdff70">コンテンツ</div>
    <div style="height:60px;background-color:#ffe670">コンテンツ</div>
    <div style="height:60px;background-color:#ffcb70">コンテンツ</div>
    <div style="height:60px;background-color:#ffa970">コンテンツ</div>
    <div style="height:60px;background-color:#ff7070">コンテンツ</div>
  </div>

</body>
</html>

FixedHeader.css

body{
  margin:0px 0px 0px 0px;
}

.header{
  height:96px;
  background-color:white;
}
 
#fixedbar{
  position:absolute;
  height:48px;
  width:100%;
  color:white;
  background-color:#303030;
}
 
#fixedbar.fixed{
  position:fixed;
  top:0px;
}
 
.fixedbarReserved{
  height:48px; /*fixedbar の高さと合わせる*/
}

解説

window.onscroll にイベントハンドラを設定します。ウィンドウがスクロールするたびに関数が実行されます。
関数内では、下方向にスクロールした距離がヘッダの高さ(今回は96ピクセル)を超えた場合に、[固定のバー]の枠に"fixed"クラスを付与します。"fixed"クラスには、"position:fixed;" "top:0px;"が指定されているため、画面の上部で固定されてスクロールアウトしなくなります。スクロール量の取得部分の詳細はこちらの記事を参照してください。

表示結果

HTMLファイルをWebブラウザで表示します。下図の画面が表示されます。

画面を下方向にスクロールします。白の[ヘッダ]がスクロールアウトします。

白の[ヘッダ]がすべてスクロールアウトします。

さらに下にスクロールします。通常であれば黒の[固定のバー]がスクロールアウトしますが、[固定のバー]は画面の上部に固定されスクロールアウトしません。

赤の[コンテンツ]がスクロールアウトします。

[固定のバー]は固定されたまま[コンテンツ]の枠がスクロールアウトします。

方向を変え、上方向に向かってスクロールします。

[コンテンツ]の枠がすべて表示されると、白の[ヘッダ]がスクロールインします。

補足:コードの記述について

「fixedbarReserved」の枠は下記のどちらの書き方でも正しく動作します。
どちらの記述方式を選択するかは好みかと思われます。

書式1

[固定のバー]はスクロールから外れ、画面に固定されるため、独立して書きたい。

  <div class="header">ヘッダ</div>

  <div id="fixedbar">固定のバー</div>
  <div class="fixedbarReserved"></div>

  <div>
    <div style="height:60px;background-color:#ff7070">コンテンツ</div>
    ......
  </div>

書式2

意味的に[固定のバー]はfixedbarReservedの領域に配置するバーであるので、fixedbarReservedのDIVタグ内に記述したい。

  <div class="header">ヘッダ</div>

  <div class="fixedbarReserved">
    <div id="fixedbar">固定のバー</div>
  </div>

  <div>
    <div style="height:60px;background-color:#ff7070">コンテンツ</div>
    ......
  </div>

著者

Penta

iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

目次