JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSとJavaScriptでスクロール時に固定されるスティッキーヘッダーを実装する方法

CSSとJavaScriptを組み合わせることで、ページをスクロールした際にヘッダーが画面上部に固定される「スティッキーヘッダー」を簡単に実装できます。

基本的な仕組みはシンプルです。JavaScriptでスクロール位置を監視し、ヘッダーの初期位置を超えたらposition: fixedのクラスを付与します。逆にスクロールが戻ったらクラスを削除して、元の位置に戻します。

実装コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        margin: 0px;
        padding: 0px;
        height: 150vh; /* スクロールバーを発生させるため */
    }
    .header {
        width: 100%;
        background-color: rgb(52, 21, 110);
        color: white;
        padding: 50px;
        font-size: 20px;
    }
    div.sticky {
        position: fixed;
        top: 0;
    }
</style>
</head>
<body>
<h1>Fixed Sticky on scroll example</h1>
<h2>Random Header Text</h2>
<h2>Randorm Header Text</h2>
<div class="header">Header Text</div>
<p style="font-size: 35px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit vel dolore delectus esse 
consequatur at nulla, consequuntur sint quas ea. Incidunt, ex. Consequatur ipsa earum 
veritatis fugiat iusto, doloremque sunt beatae quaerat laboriosam nemo soluta quidem porro 
quia. Dolore reprehenderit cum voluptatibus eius assumenda ipsam tenetur asperiores magni 
aliquid eligendi doloribus quidem ipsa et praesentium provident molestias quaerat laboriosam, 
veniam aspernatur repellendus. Debitis sapiente, odit iste voluptatibus nesciunt veritatis 
incidunt mollitia nostrum, vitae suscipit iusto molestias consequuntur rem facere perspiciatis 
ad! Ratione reiciendis asperiores aperiam vitae facilis accusantium non aliquid, facere 
cupiditate reprehenderit tempore veritatis eum accusamus omnis
tempora quos!
</p>
<script>
    window.onscroll = function() {
        setSticky();
    };
    var header = document.querySelector(".header");
    var sticky = header.offsetTop;
    function setSticky() {
        if (window.pageYOffset > sticky) {
            header.classList.add("sticky");
        }
        else {
            header.classList.remove("sticky");
        }
    }
</script>
</body>
</html>

コードの解説

  • body要素：height: 150vh を指定することで、意図的にスクロールバーを発生させています。
  • .headerクラス：ヘッダーの見た目（背景色・文字色・余白など）を定義しています。
  • div.stickyクラス：position: fixed と top: 0 を指定し、画面最上部にヘッダーを固定します。
  • JavaScript部分：window.onscroll イベントでスクロールを検知し、window.pageYOffset（現在のスクロール量）がヘッダーの初期位置（offsetTop）を超えたかどうかを判定しています。超えていれば sticky クラスを追加、戻れば削除します。

実行結果

上記のコードを実行すると、次のような表示になります。

CSSとJavaScriptでスクロール時に固定されるスティッキーヘッダーを実装する方法

少し下にスクロールすると、ヘッダーが画面上部に固定され、常に表示されたままになります。

CSSとJavaScriptでスクロール時に固定されるスティッキーヘッダーを実装する方法

補足：CSSのみでの実装について

なお、近年のブラウザでは position: sticky; プロパティを使えば、JavaScriptなしでも同様の動作を実現できます。top: 0 と組み合わせて指定するだけで、親要素の範囲内でヘッダーを貼り付けることが可能です。ただし、スクロール量に応じた細かい制御やアニメーションを加えたい場合は、本記事のようにJavaScriptで制御する方法が有効です。

  1. CSSで固定フッター（スティッキーフッター）を作成する方法

    CSSを使えば、スクロールしても常に画面下部に表示され続く「固定フッター（スティッキーフッター）」を簡単に作成できます。固定フッターの基本原理固定フッターを実現するポイントは、position: fixed; を使用することです。以下の3つのプロパティを組み合わせることで、要素を画面の最下部に固定できます。position: fixed; — 要素をビューポートに対して固定配置にしますbottom: 0; / left: 0; — 画面の左下の端に位置合わせしますwidth: 100%; — フッターを画面幅いっぱいに広げます実装例以下は、CSSで固定フッターを作成する具体的なコード例です。&

  2. CSSとJavaScriptでスクロール時にヘッダーを縮小させる方法

    CSSとJavaScriptを組み合わせることで、ページのスクロール量に応じてヘッダーのサイズを動的に変更できます。この手法は、ナビゲーションバーを画面上部に固定しながら、スクロール中はコンテンツの表示領域をできるだけ広く確保したい場合に非常に効果的です。ここでは、window.onscrollイベントとCSSのtransitionプロパティを活用し、スクロールするとヘッダーがスムーズに縮小される実装例を紹介します。実装例<!DOCTYPE html> <html> <head> <meta name="viewport" cont