サイドバーで複数のモジュールを追従させるためのカスタマイズ方法

こんにちは、つばさ（@tsubasa123）です。

現在、サイドバーに何かを追従させるカスタマイズコードを作成中です。

モジュールの追従についてセオリーやベストプラクティスを色々模索していたところ、複数のモジュールに対応したいというニーズを見かけたのでちょっと寄り道してみました。

もし同じようなことでお困りの方がいましたら参考にしていただけるとうれしいです。

確かに正攻法だと大変そう
ならば裏技だ
さいごに
関連記事

確かに正攻法だと大変そう

shiromatakumi.hatenablog.com

上記の記事で、しゅう (id:ROUTE53)さんが最下部2つのモジュールを固定したいとコメントを残しているのを偶然見かけまして。このようなことをしているブログはあまり記憶にないのですが、まぁ必要な方には必要な機能なんだなと。

で、シロマティ (id:shiromatakumi)さんもコメントでおっしゃっていますが、2つを固定させることもできそうだけどちょっとめんどくさそう。各要素の高さや要素間の隙間の大きさを計算してそれぞれ指定したりと考えることが増えてしまいます。

コメントの通り、ちゃちゃっとできる感じではないですね。

ならば裏技だ

そのままではめんどくさそうなのですが、ソースコードを追加してもレイアウトやデザインが崩れないという条件を満たすことができれば意外と簡単に実現できたりもします。

裏技と言いましたが、そんな難しいことはしません。固定したい複数の要素を1つの要素で囲んでしまうだけです。1つに囲ってしまえば要素ごとの高さや隙間の大きさを管理する必要がなくなりますので後は簡単です。

jQueryにはwrapAllという指定した複数の要素を1つの要素で囲むための関数がありますので、これを使うだけで追加のカスタマイズが完了します。

簡単にコードを書いてみました。先の記事のように遅延やレスポンシブ、ウインドウサイズの変更などは考慮していません。あくまで複数の要素を固定するためのサンプルですので細かいところは目をつぶってください。

if ((window.innerWidth ? window.innerWidth: $(window).width()) > 768) {
$(window).on('load', function() {
$('.hatena-module-search-box, .hatena-module-archive').wrapAll('<div id="fixed-module"></div>');
var $fixedModule = $('#fixed-module');
var $window = $(window);
var fixedModuleTop = $fixedModule.offset().top - 20;
var fixedModuleWidth = $fixedModule.width();
var isFixed = $fixedModule.css('position') === 'fixed';
setInterval(function() {
if ($window.scrollTop() > fixedModuleTop) {
if (!isFixed) {
isFixed = true;
$fixedModule.css({
position: 'fixed',
top: '20px',
width: fixedModuleWidth,
});
}
} else {
if (isFixed) {
isFixed = false;
$fixedModule.css({
position: 'relative',
top: 0,
});
}
};
}, 1000 / 100);
});
};