prasm prasmっていうブログだよ

jQueryでフッターに重ならずに「空いた領域をフルに使い切る追尾型サイドバー」を実装する方法

これがやりたかった!

投稿が長くなると、サイドバーのコンテンツがなくなって、メインカラムの隣が寂しくなることがありますね。

本来はいろんな情報をもったサイドバーを表示させたいのだけれど、メインカラムの縦の長さは、記事毎に異なってしまいます。

そういう状況を解消しようと、サイドバーの特定のウィジットを固定して、もったいなさを解消しているブログ、結構見ますよね。

画面を一定量スクロールした時にサイドバーなどを固定位置に配置する | OZPAの表4

僕もコチラの方法で固定していたんですが、もしやさらにもっとよい方法があるのでは??と検証を重ねた結果、

台東区でウェブ制作なら 株式会社LIG [リグ]

あのLIGでも採用している、サイドバーがすべて表示されたら、サイドバーの下を基準に固定する方法がなかなかいいのではないかと、よしこれをパクろう。これを参考にしようという結論に至りました。

どう違うのか、説明が難しいのですが

順番に説明しますと。

side01

そもそもサイドバーのもったいない問題というのは、メインコンテンツの長さによって、サイドバーが終わる状況で生まれます。

このサイドバーの終わってしまった空間がもったいないので、サイドバーの中でも固定させたいウィジェットをjQueryによって固定しましょうね。という話しでした。

side02

しかしながら、貧乏性全開のフレッシュさんとしては、まだ

なーんかもったいなくね??

と、自分の浅ましさに引けるレベルですが、もうそういう風に思っちゃったんだから仕方ない。

side03

図にするとこんな感じで、これだとモニターサイズに影響を受けずに、サイドバーを使い切っている!

フッターに重なるとかっこ悪いので、フッターには重ならないように固定を解除できます。

それではコードです。

<script>
$(function(){
    var contentHeight = $("html, body").height();
    var windowHeight = $(window).height();
    var target = $("#sidebar");
    var targetHeight = target.outerHeight();
    var targetPosition = target.position();
    var footer = $("#footer");
    var footerHeight = footer.outerHeight();
    $(window).resize(function(){
        windowHeight = $(this).height();
    });
    $(window).scroll(function(){
        var scrollTop = $(this).scrollTop();
        var visibleBottom = scrollTop + windowHeight;
        var targetBottom = targetPosition.top + targetHeight;
        if(visibleBottom >= targetBottom) {
            if(footerHeight > contentHeight - visibleBottom) {
                target.css({position:"fixed", bottom: footerHeight - (contentHeight - visibleBottom)});
            } else {
                target.css({position:"fixed", bottom: 0});
            }
        } else {
            target.css({position:"static", bottom: "auto"});
        }
    });
});
</script>

上記のコードだと、サイドバー(#sidebar)に直接CSSを足してしまうので、

#sidebar {
position:relative;
}

というような形にして、なかのdiv(.fix_box)に対してCSSをたすように指定した方がイイと思います。

<script>
$(function(){
    var contentHeight = $("html, body").height();
    var windowHeight = $(window).height();
    var target = $(".fix_box");
    var targetHeight = target.outerHeight();
    var targetPosition = target.position();
    var footer = $("#footer");
    var footerHeight = footer.outerHeight();
    $(window).resize(function(){
        windowHeight = $(this).height();
    });
    $(window).scroll(function(){
        var scrollTop = $(this).scrollTop();
        var visibleBottom = scrollTop + windowHeight;
        var targetBottom = targetPosition.top + targetHeight;
        if(visibleBottom >= targetBottom) {
            if(footerHeight > contentHeight - visibleBottom) {
                target.css({position:"fixed", bottom: footerHeight - (contentHeight - visibleBottom)});
            } else {
                target.css({position:"fixed", bottom: 0});
            }
        } else {
            target.css({position:"static", bottom: "auto"});
        }
    });
});
</script>

こっちだと事故が起こりにくいと思います。

もちろんクラスやIDの意味を理解して実装してみてください。コピペでポン!ではありませんので、誤解無きよう。

このコードでは#footerが画面に表示されれば固定は解除されます。(解除される、というよりも、フッター分上に上がっていく感じ)

あと、jQueryのコードですので、事前に本体を読み込んでくださいね。

スポンサーリンク

固定は賛否あることも理解して

そもそもサイドバーの無いスペースをもったいないとか思わない人もいます。

それに、追尾型サイドバー自体を鬱陶しいと感じる方もいます。この辺のメリットデメリットを是非ともご自身で判断して実装してみてください。

コツは最小サイズをどのデバイスで想定するかです。僕だと縦1200ピクセルのモニターを使っています。

人に寄ればmac book air11インチを使っている方はモニターの縦は768ピクセルで、さらにブラウザの額縁やOSの額縁の影響も受けるので、660ピクセル程度の表示領域しかありません。固定させるコンテンツの縦の長さをどの程度に設定するのか、いろいろ考えが別れそうですよね。

とはいえ、この方法で追尾固定型のサイドバーを実装してしまえば空白を作ることはありません。

もったいない領域が気になっている方は是非ともお試し下さい。

超スペシャルサンクス(ニワトリ)

アンギス – ハジメノダイイッポ

コードに関しては僕が書いたモノではありません。

ハングアウトでおしゃべり中に、ニワトリさん(@sato4yoshida)が書いてくれました。

圧倒的、圧倒的!!

ブログに書いていいですか?と聞くと快く了解してくれたので、ガッツリ書かせていただきました。

なお、改造や設置の疑問質問等を僕や、ニワトリさんに問い合わせるのはご遠慮下さい(笑)

コードの改変等はご自由にどうぞ。

実装される方はニワトリさんへ足を向けて寝ないようにお気を付け下さい!

ニワトリ先生!肩たたきでもぞうきん掛けでも何でもやりますので、人足が必要なときはお呼び下さい!

話しを繋いでくれた

今村だけがよくわかるブログ

今村だけが(アイドルを)よくわかるブログのiMMRさんにも感謝!

次回の記事は
「MediaPad T2 7.0 Pro用に買うたアクセサリー」
読みのがしなくッ!