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

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

CSSとJavaScriptを組み合わせることで、ページのスクロール量に応じてヘッダーのサイズを動的に変更できます。この手法は、ナビゲーションバーを画面上部に固定しながら、スクロール中はコンテンツの表示領域をできるだけ広く確保したい場合に非常に効果的です。

ここでは、window.onscrollイベントとCSSのtransitionプロパティを活用し、スクロールするとヘッダーがスムーズに縮小される実装例を紹介します。

実装例

<!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 {
        position: fixed;
        top: 0;
        width: 100%;
        background-color: rgb(52, 21, 110);
        color: white;
        padding: 50px;
        font-size: 40px;
        transition: 0.8s;
    }
</style>
</head>
<body>
<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() {resizeHeader()};
    function resizeHeader() {
        if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
            document.querySelector(".header").style.fontSize = "20px";
        } else {
            document.querySelector(".header").style.fontSize = "40px";
        }
    }
</script>
</body>
</html>

コードのポイント

  • position: fixed; … ヘッダーを画面上部に固定し、スクロールしても常に表示されるようにしています。
  • transition: 0.8s; … フォントサイズの変化に0.8秒のアニメーションを付け、急な切り替えではなく滑らかに縮小されるようにしています。
  • window.onscroll … スクロールのたびにresizeHeader()関数が呼び出され、現在のスクロール位置を判定します。
  • scrollTop > 50 … document.body.scrollTopとdocument.documentElement.scrollTopの両方をチェックすることで、ブラウザ間の差異にも対応しています。

出力結果

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

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

少し下にスクロールすると、ヘッダーのフォントサイズが40pxから20pxへと縮小され、次のように表示されます。

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

まとめ

このように、わずか数行のJavaScriptとCSSのtransitionプロパティを組み合わせるだけで、スクロールに連動して自然に縮小するヘッダーを実装できます。閾値（この例では50px）やフォントサイズ、アニメーションの速度を調整することで、サイトのデザインに合わせた柔軟なカスタマイズが可能です。

  1. CSSとJavaScriptでリスト表示とグリッド表示を切り替える方法【サンプルコード付き】

    Webアプリケーションや管理画面などでは、コンテンツの表示形式を「リスト表示」と「グリッド表示」で切り替えられるUIがよく使われています。本記事では、CSSとJavaScript（バニラJS）だけを使って、ボタンクリックでリスト表示とグリッド表示を切り替える機能を実装する方法を解説します。実装のポイントこの機能は、以下の3つの要素で構成されています。カラムレイアウト：float を使って各カラムを横並びに配置します切り替えボタン：アクティブ状態のスタイルを持つボタンを配置しますJavaScript関数：カラムの幅（width）を変更し、ボタンの active クラスを付け替えますサンプルコード

  2. CSSとJavaScriptで拡張グリッド（クリックで展開するグリッド）を作成する方法

    CSSとJavaScriptを組み合わせることで、カードをクリックすると詳細パネルが展開される「拡張グリッド（Expanding Grid）」を簡単に実装できます。本記事では、3カラム構成のグリッドを例に、具体的な実装手順をわかりやすく解説します。 実装のポイント クリックイベント：各カラムにonclick属性を設定し、クリックされたカラムに対応するタブを開きます。 表示の切り替え：新しいタブを開く前に既存のタブをすべて非表示にすることで、常に1つのタブだけが展開された状態を保ちます。 閉じるボタン：タブ右上の「×」ボタンをクリックするとパネルが閉じ、元のグリッド表示に戻ります。 サンプル