スポンサーリンク

WordPress無料テーマLightningのスクロール時サイドバー固定方法を変更する

Web系

この記事はLightning Ver 6.16.0時点の仕様を元に記述しています。アップデートにより仕様が変わる可能性があります。


WordPressの無料テーマであるLightningには、サイドバーに配置されたメニューやウィジェットが、スクロール時に上部で固定される機能が標準で付いています。

ただ、スクロール時に若干ガタつくのと、固定される位置がページ上の端(CSSのtopプロパティで0pxの位置)であるために一部がヘッダーに隠れてしまうところが気になります。ちなみに前者は、スクロール時にリアルタイムで座標を計算し、CSSを設定していることによって起きているようです。

よって、自分で固定方法を変えてみることにしました。これに伴い、標準の固定機能はテーマカスマイザーより無効にしておきます。

仕様

ページのスクロール時に、サイドバーがヘッダーの下に隠れる直前で、サイドバーのpositionをfixedにします。しかし、単にそれだけだとX座標と幅が崩れるので、ページ表示時にそれらを取得しておき、fixed時に適用します。

また、サイドバーが表示される画面幅の時だけ実行します。

ソースコード

外部のスクリプトファイルとして用意し、functions.phpでwp_footer()内、つまり</body>直前に読み込むことにしました。※勿論、子テーマを用意します

fixside.js

var sidebar;
var sidebarRect, sidebarLeft, sidebarTop,
    sidebarWidth;
sidebar = document.querySelector('.sideSection');
if (window.parent.screen.width > 991 && sidebar != null) {
  sidebarRect = sidebar.getBoundingClientRect();
  sidebarLeft = sidebarRect.left;  //サイドバーの初期X座標
  sidebarTop = sidebarRect.top;  //サイドバーの初期Y座標
  sidebarWidth = sidebar.clientWidth;  //サイドバーの初期幅

  window.addEventListener('scroll', function () {
    let header, headerHeight,
        scrollY;
    header = document.querySelector('.siteHeader');
    headerHeight = header.clientHeight;  // ヘッダーの高さ
    scrollY = window.pageYOffset ;  // ウィンドウの縦スクロール量
    if (sidebarTop - headerHeight < scrollY) {
      sidebar.style.position = 'fixed';
      sidebar.style.top = headerHeight + 'px';
      sidebar.style.left = sidebarLeft + 'px';
      sidebar.style.marginLeft = '0px';
      sidebar.style.marginTop = '0px';
      sidebar.style.width = sidebarWidth + 'px';
    } else {
      sidebar.style.position = 'static';
      sidebar.style.top = '';
      sidebar.style.left = '';
      sidebar.style.marginLeft = '';
      sidebar.style.marginTop = '0px';
      sidebar.style.width = '';
    }
  });
}

ヘッダーの高さをスクロール時に取得しているのは、スクロール位置が0の時と高さが変わる為です。

functions.php

function fixside_scripts() {
  wp_enqueue_script( 
    'fixside-script', 
    get_stylesheet_directory_uri() . '/js/fixside.js',
    array('lightning-js'),
    false,
    true
  );
}
add_action( 'wp_enqueue_scripts', 'fixside_scripts' );

Lightning本体のJSによる固定処理を上書きする為に、標準で読み込まれるJSファイルの後に読み込むよう、指定しています。

その他留意事項

固定するタイミングを「ヘッダーの下に隠れる直前」としている通り、ヘッダーの高さしか考慮していないので、トップページにサイドバーを表示させている場合は、サイドバーがスライドの後ろに隠れてしまいます。

これをスライドの下に固定するには、「スライドが存在する場合は、その高さもfixed適用条件に考慮する」という処理の追加(上の例では、sidebarTopにスライドの高さを加算)が必要になります。

また、サイドバーが長くて画面高さが狭い時、フッターの上に重なる状態になる時があります。重なる時はtopの座標を更新しない等の対策が必要になりそうです。

Web系
スポンサーリンク
YUKIをフォローする
Wynes : Note