こんにちは。Sitecore技術担当の山田です。

ヘッダーにposition: fixedを指定して固定表示にすると、エクスペリエンスエディタでリボンの高さ分だけずれて表示される問題があります。
この問題は、クライアントパイプラインと呼ばれるSitecoreの機能を使用することで解決できます。

解決方法

  1. 適当なJavaScriptファイルを作成し、以下のスクリプト記述します。
    固定表示のヘッダー要素のセレクタは必要に応じて書き換えてください。
define(['sitecore'], function (sitecore) {
    return {
        priority: 50,
        execute: function (context) {
            if (!('MutationObserver' in window)) {
                return;
            }

            // 100ミリ秒ごとにリボンの存在を確認する
            var ribbonExists = setInterval(function () {
                // リボンが存在する場合のみ処理
                var ribbon = window.parent.document.getElementById('scCrossPiece');
                if (!ribbon) return;

                // 適用対象の要素を取得
                var elem = window.parent.document.querySelector('固定表示のヘッダー要素のセレクタ');

                // リボンの高さ分だけtopをずらす
                function shiftTop() {
                     elem.style.top = ribbon.style.height;
                }
                shiftTop();

                // リボンが開閉されたらtopを修正するよう監視
                var ribbonObserver = new MutationObserver(shiftTop);
                ribbonObserver.observe(ribbon, { attributes: true, attributeFilter: ['style'] });

                // intervalの解除
                clearInterval(ribbonExists);
            }, 100);
        }
    };
});

  1. 作成したJavaScriptファイルを、ウェブサイトのフォルダに配置します。

  2. Sitecoreで以下のアイテムを作成します。

  • データベース: core
  • パス: /sitecore/client/Applications/ExperienceEditor/Pipelines/InitializePageEdit
  • アイテム名： Fix position-fixed header
  • テンプレート: PipelineProcessor


  1. 作成したアイテムのProcessorFileフィールドに先程配置したスクリプトまでのパスを指定します。

以上で、ヘッダーのずれが解消されます。

参考