jQueryでサイドコンテンツの表示を制御～改修 | 電脳備忘録

画面サイズに応じて、サイドコンテンツの表示方法を変えようとCSSをあれこれいじくりましたが結局うまくいかず、最近取り組み始めたjQueryで対応してみることにしました。

ちゃんとCSSを理解していればjQueryで制御する必要などないではないのか？という思いもありますが、今回はこれで解決しました。他のコードを書くときにも使えそうなので、自分向け備忘録として残しておきます。

お約束

素人が書いたコードなので取扱注意です。参照は自己責任でお願いします。

やったことの記録

cssで設定すると、スクロールすると白い部分の背景画像が表示されず、きれて表示されてしまっていました。そこで、#main_wrapperの縦サイズがブラウザのウィンドウサイズを超えるときは#side_wrapperと#main_wrapperの縦サイズを均等にして、#side_wrapperの背景画像をきれることなく表示されることを思いつきました。ウィンドウサイズ（縦）より要素（縦）が大きい場合、下記のように記述すると取得できるようです。
例：ウインドウサイズを超えてる#main_wrapperの縦サイズの値を取得する

var getHeight = ($('#main_wrapper').get(0).scrollHeight);

ウインドウサイズと要素のサイズを取得比較して、要素のサイズが大きい場合、class="equilibrium"を追加しています。このクラスを追加することで#side_wrapperと#main_wrapperの縦サイズが均等になるようにしています。要素のサイズがウインドウサイズを超えない場合は#containerにclass="lessthan"を追加しています。

やったことの記録

$(function() {
var getHeight = ($('#main_wrapper').get(0).scrollHeight);
var windowHeight = $(window).height();
//alert(windowHeight);	
//alert(getHeight);
//ウインドウと要素の高さを比較
if (getHeight >= windowHeight) {
//main_wrapperとside_wrapperの高さをそろえるため .equilibrium を設定
$("#main_wrapper").addClass("equilibrium");
$("#side_wrapper").addClass("equilibrium");
} else {
//height:100%を設定
$("#container").addClass("lessthan");
}	
});

equilibrium

.equilibrium {
padding-bottom:32767px;margin-bottom:-32767px;
}

lessthan

.lessthan {
height:100%;	
}

このコードに先に作成したコードを組み合わせる。

$(function() {
var getHeight = ($('#main_wrapper').get(0).scrollHeight);
var windowHeight = $(window).height();
//alert(windowHeight);	
//alert(getHeight);
//ウインドウと要素の高さを比較
if (getHeight >= windowHeight) {
//main_wrapperとside_wrapperの高さをそろえるため .equilibrium を設定
$("#main_wrapper").addClass("equilibrium");
$("#side_wrapper").addClass("equilibrium");
} else {
//height:100%を設定
$("#container").addClass("lessthan");
}	
//サイドコンテンツの固定と解除
var minHeight = 650;
if (windowHeight <= minHeight) {
$("#side_container").css("position", "absolute");
} else {
$("#side_container").css("position", "fixed");
}
});

ただ、これだと読み込み後実行だけになってしまうのでリサイズしたときの処理も追記しました。リサイズ後、要素のサイズ（縦）がウィンドウサイズ（縦）を下回った場合、読み込み時に指定したequilibriumとlessthanを解除するようにしています。

//リサイズ時に実行
$(window).bind('resize', function() {
var getHeight = ($('#main_wrapper').get(0).scrollHeight);
var windowHeight = $(window).height();
//alert(windowHeight);	
if (getHeight <= windowHeight) {
$("#main_wrapper").removeClass("equilibrium");
$("#side_wrapper").removeClass("equilibrium");	
} else {
//height:100%を解除
$("#container").removeClass("lessthan");
}	
//サイドコンテンツの固定と解除
var minHeight = 650;
if (windowHeight <= minHeight) {
$("#side_container").css("position", "absolute");
} else {
$("#side_container").css("position", "fixed");
}
});

で、全部くっつけたらこんな長ったらしいコードになってしまいました。とりあえず意図した動きをしてくれています。（alertは取得した値を確認するために使ってました。デバッグ時の確認用としてコメントアウトで残してあります。）

$(function() {
var getHeight = ($('#main_wrapper').get(0).scrollHeight);
var windowHeight = $(window).height();
//alert(windowHeight);	
//alert(getHeight);
//ウインドウと要素の高さを比較
if (getHeight >= windowHeight) {
//main_wrapperとside_wrapperの高さをそろえるため .equilibrium を設定
$("#main_wrapper").addClass("equilibrium");
$("#side_wrapper").addClass("equilibrium");
} else {
//height:100%を設定
$("#container").addClass("lessthan");
}	
//サイドコンテンツの固定と解除
var minHeight = 650;
if (windowHeight <= minHeight) {
$("#side_container").css("position", "absolute");
} else {
$("#side_container").css("position", "fixed");
}
//リサイズ時に実行
$(window).bind('resize', function() {
var getHeight = ($('#main_wrapper').get(0).scrollHeight);
var windowHeight = $(window).height();
//alert(windowHeight);	
if (getHeight <= windowHeight) {
$("#main_wrapper").removeClass("equilibrium");
$("#side_wrapper").removeClass("equilibrium");	
} else {
//height:100%を解除
$("#container").removeClass("lessthan");
}	
//サイドコンテンツの固定と解除
var minHeight = 650;
if (windowHeight <= minHeight) {
$("#side_container").css("position", "absolute");
} else {
$("#side_container").css("position", "fixed");
}
});
});

とりあえず動くことは動くのですが、汚いコードになっているのは間違いなさそうです。読み込みの高速化を考慮してのコーディングも課題ですね。