コピペOK！編集画面でスクロールに合わせてタイトルを画面上部に固定する方法

こんにちは。
リーデックス小川です。

今回は、編集画面でタイトルがスクロールに合わせて画面上部に固定する方法についてご紹介します。編集画面が長くなってしまったときに、修正している内容のタイトルが知りたくなることがあると思います。

画面上部にタイトルを固定化することで、スクロールしてもタイトルを確認することができますので、編集作業で迷うことが少なくなります。

通常の編集画面について

まずは、デフォルトの編集画面について確認しま。スクロールが長い画面の場合、ある程度スクロールをするとタイトルが消えてしまいます。

スクリプトとスタイルでのカスタマイズ後

では、スクロール後に画面上部にタイトルを固定するようスクリプトとスタイルでカスタマイズするとどのように表示されるかを見てみます。

先ほどの画面にカスタマイズを行うと、下記のように表示されます。

実際の動きは下記のようになります。タイトルが画面上部に固定されているのがわかると思います。

スクリプト、スタイルのプログラム

スクリプトとスタイルは下記となります。テーブルの管理の「スクリプト」「スタイル」にそれぞれ設定してください。

スクリプト、スタイルの設定については、下記記事を参照ください。

スクリプト

$p.events.on_editor_load = function(){
  const navPos = $( '#HeaderTitleContainer' ).offset().top; 
  $( window ).on( 'scroll.header', function() {
    if ( $( this ).scrollTop() > navPos ) {
      $( '#HeaderTitleContainer').addClass( 'm_fixed' );
    } else {
      $( '#HeaderTitleContainer').removeClass( 'm_fixed' );
    }
  });
}

画面を下にスクロールしてヘッダー位置を通過したら、ヘッダーに m_fixed クラスを付けて固定。上に戻ったら解除するプログラムとなっています。

• const navPos = $('#HeaderTitleContainer').offset().top;
#HeaderTitleContainer の画面上からの位置（縦方向の座標）を取得して、navPos に保存します。 ヘッダーの高さの基準値となります。

• $(window).on('scroll.header', function() { ... });
  ウィンドウがスクロールされるたびに中の処理を実行します。scroll.headerはこのイベントは名前空間付きで後で個別に解除するために設定しています。詳細は割愛します。

• if ($(this).scrollTop() > navPos) { ... } else { ... }
  現在のスクロール量（上から何pxスクロールしたか）を調べ、

  • ヘッダー位置 navPos より下にスクロールしたら → クラス m_fixed を追加

  • そうでなければ → m_fixed を削除

• addClass('m_fixed') / removeClass('m_fixed')
  CSS クラスの付け外しで、「固定表示する・しない」を切り替えます。

スタイル

#HeaderTitleContainer.m_fixed {
    left: 0px;
    top: 0;
    display: flex;
    position: fixed;
    align-items: center;
    z-index: 255;
    padding: 0 10px;
    width: 100%;
    height: 50px;
    background-color: var(--page-bg);
}

• left: 0px;
  画面の左端に配置します。

• top: 0;
  画面の最上部に配置します。

• display: flex;
  子要素をフレックスレイアウトで横並びに整列できるようにします。

• position: fixed;
  スクロールしても常に画面上に固定表示されます。

• align-items: center;
  フレックスレイアウトで縦方向に中央揃えします。

• z-index: 255;
  他の要素よりも前面に表示されるようにします。

• padding: 0 10px;
  左右に 10px の余白を入れて、内容が端にくっつかないようにします。

• width: 100%;
  画面幅いっぱいに広がります。

• height: 50px;
  ヘッダーの高さを固定で 50px に設定します。

• background-color: var(--page-bg);
  サイト全体で共通して使っている変数 --page-bg の色を背景に適用します。

まとめ

今回は、編集画面でスクロールに合わせてタイトルを画面上部に固定する方法を書いてみました。

これを応用し、エディタで設定したタブの切替するためのリンクを設定したり、タイトルだけではなく、作成日時や更新日時、ページ切り替えまで含めた領域（下図参照）を固定するのも良いかもしれません。

弊社では、スクリプトやスタイルを利用したカスタマイズについてご支援させていただいております。スクリプトについて相談したい、業務を改善のために実現したい機能がある、や、本記事や過去の記事のスクリプトを応用したい、などありましたら、お気軽にお問合せください。

それでは、今回はこの辺で。
最後までご覧いただき、ありがとうございました。