LoginSignup
0
2
@iambear

固定ヘッダがあるモーダル内でさらに内部ヘッダを固定する方法

Posted at

説明

  • updateInnerHeaderPosition関数は、外側のヘッダの高さを計算し、内部ヘッダのtopプロパティを動的に設定します。
  • ページが完全に読み込まれたとき（DOMContentLoadedイベント）、およびウィンドウがリサイズされたとき（resizeイベント）にこの関数を呼び出します。
  • MutationObserverを使用して、外側のヘッダに変更があった場合に関数を呼び出します。これにより、外側のヘッダの高さが動的に変更された場合にも内部ヘッダの位置が自動的に更新されます。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Header in Modal</title>
    <style>
        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            height: 80%;
            background-color: white;
            overflow: auto;
            border: 1px solid #ccc;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .modal-header {
            position: sticky;
            top: 0;
            background-color: #f1f1f1;
            padding: 10px;
            border-bottom: 1px solid #ccc;
            z-index: 10;
        }

        .modal-content {
            padding: 20px;
        }

        .inner-header {
            position: sticky;
            top: 0; /* JavaScriptで動的に設定されるため初期値は0 */
            background-color: #e1e1e1;
            padding: 10px;
            border-bottom: 1px solid #ccc;
            z-index: 5;
        }

        .content {
            height: 1000px;
        }
    </style>
</head>
<body>
    <div class="modal">
        <div class="modal-header">
            モーダルの固定ヘッダ
        </div>
        <div class="modal-content">
            <div class="inner-header">
                内部の固定ヘッダ
            </div>
            <div class="content">
                スクロールコンテンツがここに入ります。
            </div>
        </div>
    </div>

    <script>
        function updateInnerHeaderPosition() {
            var modalHeader = document.querySelector(".modal-header");
            var innerHeader = document.querySelector(".inner-header");

            if (modalHeader && innerHeader) {
                var modalHeaderHeight = modalHeader.offsetHeight;  // 外側ヘッダの高さを取得
                innerHeader.style.top = modalHeaderHeight + "px";  // 内部ヘッダのtopプロパティを設定
            }
        }

        document.addEventListener("DOMContentLoaded", function() {
            updateInnerHeaderPosition();  // ページロード時に位置を更新

            // ウィンドウリサイズ時に高さを再計算
            window.addEventListener("resize", updateInnerHeaderPosition);

            // モーダルヘッダの高さ変更を監視
            var modalHeader = document.querySelector(".modal-header");
            var observer = new MutationObserver(updateInnerHeaderPosition);
            observer.observe(modalHeader, { attributes: true, childList: true, subtree: true });
        });
    </script>
</body>
</html>
0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
2