１つのスクリプトでTOP固定＆下固定のサイドバーを作る

更新に伴ったネタです。
人気のある固定サイドバーのスクリプト。
どうせ作るなら、1個のスクリプトで条件分岐させて、上合わせも下合わせもやったほうが良いと思う。
長ければ下合わせで、短ければ上合わせの固定バーが良いんでない？

固定サイドバーのスクリプト

jQuery(function ($) {
if (0 < $("#fixbar").size()) {
        var w = $(window).width();
        var y = 699;
        var mainH = $("#main").height();
        var barH = $("#secondary").outerHeight(true);
        if (y < w && mainH > barH) {
            var wh = $(window).height();
            var fix = $('#fixbar');
            var fixh = $('#fixbar').outerHeight(true);
            var foth = $('#colophon').height();
            var row = $('.row').width();          
            var wfh =  (wh - foth);
            var pdsp =  ((w - row)/2);
                if (0 < $("#item-nav").size()) {
                    var navH = $("#item-nav").height();
                    var fixTop = ($('#fixbar').offset().top - navH - navH);
                    } else {
                    var navH = 0;
                    var fixTop = $('#fixbar').offset().top;
                    }
            $(window).scroll(function () {
                        if (fixh < wfh) {
                            var winTop = $(this).scrollTop();
                                if (winTop >= fixTop) {
                                fix.css({ position: "fixed", top: navH + "px", 'padding-right': pdsp + "px" });
                                fix.addClass('col-4 tablet-col-4');
                                } else {
                                fix.css({ position: "inherit", top: "0px", 'padding-right': "0px" });
                                fix.removeClass('col-4 tablet-col-4');
                                }
                        } else {
                            var winTop = $(this).scrollTop();
                            var winbt = (wh + winTop);
                            var fixbt = (fixTop + fixh + navH + navH);
                            var fixless = (fixh - wh);
                                if (winbt >= fixbt) {
                                var fttop = $('#colophon').offset().top;
                                fix.addClass('col-4 tablet-col-4');
 if (winbt >= fttop) {
 var ffless = (fixless + winbt - fttop);
 fix.css({ position: "fixed", top: -ffless + "px", 'padding-right': pdsp + "px" });
 } else {
 fix.css({ position: "fixed", top: -fixless + "px", 'padding-right': pdsp + "px" });
 } 
                                }else {
                                fix.css({ position: "inherit", top: "0px", 'padding-right': "0px" });
                                fix.removeClass('col-4 tablet-col-4');
                                }
                            }
            });
        }
    }
});

こんな感じです。

ざっと説明すると、まずウィンドウ幅の条件。レスポンシブなんだから必要でしょう。
次は高さの条件。そもそも固定が必要無い高さもある。
次は上合わせのする時の条件と、上合わせにする為のCSSとか。
ウチのそのままコピペなので、そのままじゃ使えませんよ。
次は下合わせの条件とCSSとか。

僕の場合、CSSとclassを同時につけてあげてデザインが崩れないようにしてます。あと、アドセンスは固定化しちゃダメなので、いずれもアドセンスの枠は対象にならないように作ります。

簡単な説明ですが、そんな感じです。

---

---