WordPress 用プラグイン Standard Widget Extensions (SWE) をリリースしていますが、このプラグインはスクロール時にサイドバー (Widget Area) を固定する機能 (Sticky Sidebar 機能) を持っています。 世の中にその動作を実現するサンプルコードは溢れていますが、よく見るとそれらは動作条件が限られていることがほとんどです。 プラグインとしてリリースするにはより汎用化して幅広い条件で安定して動くことが求められます。 今回は SWE の Sticky Sidebar 動作のこだわりを説明します。 この記事を読むと、きっとあなたもこのプラグインを試してみたくなるはず！

止まる位置を自然に

SWE ではウインドウサイズと比べて長いサイドバーと短いサイドバーで表示位置の基準を変えています。 長いサイドバーであればサイドバー下端が画面下端となって止まります。 短いサイドバーはサイドバー上端が画面上端で止まります。

上端で合わせる動作のみのプラグイン／コードが多いと思いますが、SWE はより自然な動作となっています。

フッターが来たら再び動き始める動作

サイドバーが固定されてから更にスクロールし続けると、フッターとかぶさらないように再度サイドバーが動き始めます。 SWE では、この動作を開始する位置はコンテンツ要素とサイドバー要素の位置と高さから計算します。

スクロール再開位置の決定方法は他にも以下のようなやり方があると思いますが、それぞれ欠点があり、特に 2本のサイドバーを使っているテーマでは困ることになります。

フッター要素の位置とスクロール量から再開位置を計算する

レスポンシブ Web デザインでは、画面サイズに応じてサイドバーがフッター化する等でコンテンツ要素の直後にくる要素が変わってしまったりします。 それに合わせて計算に用いるフッター要素を変えるような仕組みがないとうまくいきませんが、この実装はなかなか難しいと思います。

予めページ最下端からのマージンを決め数値をセットしておく

やはりレスポンシブ Web デザインでコンテンツの後の要素が増えていくと固定されたマージンでは困ることになります。

というわけで、これらの方法よりも SWE の方法の方が優れています。

レスポンシブ Web デザイン対応

このように SWE ではレスポンシブ Web デザイン対応テーマでの動作にこだわっています。 要素の幅やマージンが ‘%’ 指定されていたりすると固定時やブラウザリサイズ時の動作が怪しくなるコードが多いですが、SWE ならばこれも大丈夫です。 このあたりの動作は Version 1.5.2 でかなり改善しましたので、昔使って今一つと思った方も最新バージョンでは納得いただけるのではないかと思います。

様々なプラグイン／コードでブラウザをリサイズ時動作を比較してみると違いがわかりますよ！

2本のサイドバーの動き

SWE では 2本までサイドバーを指定することができます。 コンテンツより長いサイドバーがある場合、コンテンツではなくその長い方のサイドバーに合わせて他方のスクロールバーのスクロール停止位置を決めます。

応用として、この動作を裏技的に使うと長い方に合わせてスクロール停止するような 2カラムレイアウトを実現することもできると思います。

折り返しの動作

あんまり話題にならないのですが、Quick Switch Back モードというモードがあり、これを有効にするとスクロール方向を変えた時にすぐにサイドバーが動くようになります。 作者的には密かに目玉だと思っています。

動的コンテンツへの対応

SWE ではページロード後にコンテンツサイズが変化するようなテーマに備えて、タイマー + カウンターを使って固定位置等の再計算を実行する仕組みがあります。 ただし、Quick Switch Back モード使用時は再計算時の位置調整が目立つので再計算の実行は必要最小限にするのがお勧めです。

丁寧な計算処理

padding や border、margin が 0 でなかったり、box-sizing が指定されていたり、z-index を使っていたりするテーマでは注意してコードを書かないとすぐに動かなかったり、ぎこちなかったりしてしまいます。 その点、SWE ならば大丈夫です。

この記事を読んで興味を持った方は是非 Standard Widget Extensions を試してみてください。もちろんこのサイトでも使用しているので動作を確認いただけます。 日本語公式ページはこちらです。