今回も WordPress プラグイン開発からの JavaScript ネタです。
問題の所在
レスポンシブ Web デザインを採用しているページの CSS を確認すると以下のように width や margin がパーセント表示で比率指定されている要素を見つけることができます。
.content-sidebar {
margin-left: -29.04761904%;
width: 29.04761904%;
}
私はある要素をスクロール時に固定する (position = fixed とする) 効果を実装しようとしていました。ここで一つ問題となったのが、width が %指定のままで position = fixed にして位置を固定すると比率の基準となる要素が変わるため幅が変化してしまうことです。position = static であれば親要素に対しての比率として計算されますが、fixed に変えると document に対しての比率となってしまうのです。
値を固定してみる
これを避けるには一度取得した値を再度設定しピクセル値で固定することです。
var w = $('#sidebvar').width();
$('#sidebar').width(w);
これで position = fixed の場合もレイアウトが崩れなくてすみます。ブラウザがリサイズされるまでは...。リサイズ後の幅はどうやって計算すればよいのでしょう？
リサイズ後の適切な幅を得るには
リサイズ後の値を得るためには計算し直しが必要です。しかし、width() が返すのはピクセル値で、調べた限りでは CSS ファイルに記述された比率を簡単に取得する方法はなさそうです。私は安易に CSS ファイルに書かれた比率をパラメータとしてユーザーに入力させて保持していましたが、ある日そんなことをしなくても処理できる方法を見つけました！
わかってしまえば簡単なのですが、下のコードのように一旦 width をクリアすることで解決します。すると CSS ファイルに記述された %値に従って幅が計算されるのです。jQuery API リファレンスをよく読むと書いてあるのですが、空文字列を渡すとこれまでに API 経由で設定したスタイル指定をクリアし CSS ファイルの記述通りに振る舞うようになります。
$('#sidebar').css('width', '');
まとめて書くとリサイズ時のハンドラでは以下の様に width 一旦クリアし再度取得したピクセル値で設定することになります。
$('#sidebar').css('width', '');
w = $('#sidebvar').width();
$('#sidebar').width(w);
きちんとコメントを残さないと何をやっているかわからなくなりそうです。
いつもの宣伝！
というわけでこれは Standard Widget Extension という WordPress プラグインを書くときに使ったテクニックです。ブログの方にはその他の細々した JavaScript/jQuery テクニックも合わせてまとめておきましたので、興味があればどうぞ。
本件については以下の記事を参考とさせていただきました。