STINGER5のscroll.jsで動的なサイズ変更に対応させる

scroll.js

/*--------------------------------
広告のフロート
-------------------------------*/
// jQueryの開始方法を変更
$(function() {
    /*
    Ads Sidewinder
    by Hamachiya2. http://d.hatena.ne.jp/Hamachiya2/20120820/adsense_sidewinder
    */
    var main = $('main'); // メインカラムのID
    var side = $('#side aside'); // サイドバーのID
    var wrapper = $('#scrollad'); // 広告を包む要素のID

    // 要素がなければ何もしない
    if (main.length === 0 || side.length === 0 || wrapper.length === 0) {
        return;
    }

    var w = $(window);
    var wrapperHeight = wrapper.outerHeight();
    var wrapperTop = wrapper.offset().top;
    var sideHeight = side.outerHeight();
    var sideTop = side.offset().top;
    var sideLeft = side.offset().left;

    var sideMargin = {
        top:    side.css('margin-top')    || 0,
        right:  side.css('margin-right')  || 0,
        bottom: side.css('margin-bottom') || 0,
        left:   side.css('margin-left')   || 0
    };

    var winLeft;
    var pos;

    var scrollAdjust = function() {
        // サイドバーかスクロール広告の高さが変わっていたら更新する
        // 広告が浮いてる状態で高さが更新されるとwrapperTopにズレが発生する可能性あり
        if (sideHeight != side.outerHeight() || wrapperHeight != wrapper.outerHeight()) {
            sideHeight = side.outerHeight();
            wrapperHeight = wrapper.outerHeight();
            wrapperTop = wrapper.offset().top;
        }
        var mainHeight = main.outerHeight();
        var mainAbs = main.offset().top + mainHeight;
        var winTop = w.scrollTop();
        winLeft = w.scrollLeft();
        var winHeight = w.height();
        // スクロール広告の頭が画面上部からはみ出そうで、メインコンテンツがサイドバーが長い=広告を浮かす必要がある
        var nf = (winTop > wrapperTop) && (mainHeight > sideHeight) ? true : false;
        // スクロール広告の頭からサイドバーが終わるまでの高さ
        var wrapperTop2SideBottomHeight = sideHeight - (wrapperTop - sideTop);
        /**
         * 浮かす必要が無いならstaticでそのまま。
         * 画面上部の高さ＋広告以下の高さを合わせて、コンテンツの高さを超えるならabsoluteで終端を揃える。
         * それ以外はfixedで広告の頭を固定で浮かして表示する。
         */
        pos = !nf ? 'static' : (winTop + wrapperTop2SideBottomHeight) > mainAbs ? 'absolute' : 'fixed';
        if (pos === 'fixed') {
            /**
             * スクロール広告の下にコンテンツ置いても大丈夫なように上基準に変更
             * 広告の頭が画面上部に合うように引っ張り上げる。
             * サイドバーが開始する高さまでは除去しないとずれる。
             */
            side.css({
                position: pos,
                top: sideTop - wrapperTop,
                bottom: '',
                left: sideLeft - winLeft,
                margin: 0
            });

        } else if (pos === 'absolute') {
            side.css({
                position: pos,
                top: mainAbs - sideHeight,
                bottom: '',
                left: sideLeft,
                margin: 0
            });

        } else {
            side.css({
                position: pos,
                marginTop: sideMargin.top,
                marginRight: sideMargin.right,
                marginBottom: sideMargin.bottom,
                marginLeft: sideMargin.left
            });
            // ずれた時の為に、通常の領域に戻った時に再調整する
            wrapperTop = wrapper.offset().top; 
        }
    };

    var resizeAdjust = function() {
        side.css({
            position:'static',
            marginTop: sideMargin.top,
            marginRight: sideMargin.right,
            marginBottom: sideMargin.bottom,
            marginLeft: sideMargin.left
        });
        sideLeft = side.offset().left;
        winLeft = w.scrollLeft();
        if (pos === 'fixed') {
            side.css({
                position: pos,
                left: sideLeft - winLeft,
                margin: 0
            });

        } else if (pos === 'absolute') {
            side.css({
                position: pos,
                left: sideLeft,
                margin: 0
            });
        }
    };
    w.on('load', scrollAdjust);
    w.on('scroll', scrollAdjust);
    w.on('resize', resizeAdjust);
});