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

ホーム » Webと技術 » wordpress » テーマカスタマイズ » jQueryでフッターに重ならずに「空いた領域をフルに使い切る追尾型サイドバー」を実装する方法

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

これがやりたかった！

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

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

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

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

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

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

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

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

順番に説明しますと。

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

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

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

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

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

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

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

それではコードです。

<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のコードですので、事前に本体を読み込んでくださいね。