[JQuery]サイドバーを追従させる

概要

サイドバーを fixed させて、常に表示させたい。
ただし、元々サイドバーがある位置より上へは表示させたくない。

▼参考サイト
http://cinemakadokawa.jp/dvd.html

やり方

jQueryを使って実装します。
サクッとコードだけ載せます。
コメントに簡単な説明を書いたのでそれを参考にしてください。

<header>
    <h1>タイトル名</h1>
    <nav>
        <ul>
            <li>メニュー1</li>
            <li>メニュー2</li>
            <li>メニュー3</li>
            <li>メニュー4</li>
            <li>メニュー5</li>
        </ul>
    </nav>
</header>
<div class="content_wrap">
    <div class="content">
        <div>
            <p>コンテンツ内容</p>
        </div>
        <div>
            <p>コンテンツ内容</p>
        </div>
    </div>
    <div class="sideber">
        <ul>
            <li>コンテンツ1</li>
            <li>コンテンツ2</li>
        </ul>
        <p>何かの説明が入っているよ</p>
    </div>
</div>
<footer>フッター</footer>

jQuery(function($) {
    // header ナビゲーションを固定している場合
    // ナビメニュー分の高さを取得する。
    var nav_h   = $('nav').innerHeight();

    // サイドバーの要素
    var $sideber = $('.sideber');
    // サイドバーの子要素
    var $s_ul    = $('ul', $sideber);
    var $s_p     = $('p', $sideber);
    // ラッパー要素
    var $wrap    = $('.content_wrap');
    // ラッパー要素幅
    var wrap_w   = $wrap.innerWidth();
    // 追尾終了する要素
    var $footer  = $('footer');
    var sideber_position = function() {

        // Scroll値
        var scroll         = $(document).scrollTop();

        // サイドバーの高さ
        // flexを使用して、position: static の場合、サイドバーの高さが変わるため子要素で取っている
        var sideber_h      = $s_ul.innerHeight() + $s_p.innerHeight();

        // サイドバーのラッパーのOffset値
        var wrap_t         = $wrap.offset().top;
        // 追尾終了する要素のOffset値
        var foot_t         = $footer.offset().top;
        // Absolute指定する値
        var ab_bottom      = foot_t - nav_h - sideber_h;
        // ブラウザサイズ
        var vw             = window.innerWidth;
        // Fixed指定の際のright量
        // ラッパー幅の1/2、Window幅がラッパー幅より小さければマイナス
        var sidebar_r = vw > wrap_w ? (vw - wrap_w) / 2 : vw - wrap_w;

        // Absolute指定値(追尾終了値)
        if (ab_bottom < scroll) {
            $sideber.css({
                'position': 'absolute',
                'top': 'initial',
                'right': 0,
                'bottom': 0
            });
        // Fixed指定値(追尾中値)
        } else if (wrap_t - nav_h < scroll) {
            $sideber.css({
                'position': 'fixed',
                'top': 140,
                'right': sidebar_r + $(window).scrollLeft(),
                'bottom': 'initial',
            });
        // Static指定
        } else {
            $sideber.css({
                'position': 'static'
            });
        }
    };

    // Load時
    $(document).on('load', function() {
        sideber_position();
    });
    // Scroll, Resize時
    $(window).on('scroll resize', function() {
        sideber_position();
    });
});