サイドコンテンツはCSSでposition: fixed;を指定して固定しています。この設定だとノートＰＣのように縦の解像度が低い環境で閲覧した場合、 すべてを閲覧することが出来ません。そこで、普段は固定しておき、縦の解像度が一定の値を下回った場合固定を解除するようにしてみました。

お約束

jQuery独習中の素人備忘録なので参考にならないとは思いますが、参照は自己責任でお願いいたします。

とりあえず書いてみた

読み込み時、リサイズ時に取得したサイズが650px以下だったらposition: fixed;を解除、それ以外はposition: fixed;を設定するように書いてみました。

$(function() {
function resizeContainer() {
var getHeight = $(window).height();
//alert($(window).height());
var minHeight = 650;
if (getHeight <= minHeight) {
$("#side_wrapper").css("position", "absolute");
} else {
$("#side_wrapper").css("position", "fixed");
}
}
$(window).bind("load", resizeContainer);
$(window).bind("resize", resizeContainer);
});

ウィンドウの高さを取得
var getHeight = $(window).height();
取得したウィンドウの高さが650px以下だったら処理を実行
if (getHeight <= minHeight) {

サンプルだとこんな感じ。 ブログだと縦に長いサイトになりがちなので「サイドコンテンツ（メニュー）を固定することで他のコンテンツへの遷移を楽に出来るのでは？」と自分なりに考え実装してみましたが、他にこのような構成のサイトを見たことがない（スクロールにあわせてメニューが追っかけてくるサイトはたまに見かけますが･･･）のでこれでいいのか自分でも明確な答えが出せずにいます。