JavaScriptを使ってサイドバーを固定位置に配置・自動追尾、再チャレンジ

こんにちは、naouniverse( @naouniverse708 )です。

2013/09/05 23:40の記事、

サイドバー等を固定位置に配置・自動追尾させてみた。

にて挑戦したサイドバーの自動追尾ですが、諸々不具合が多発していました。

具体的には、ウィンドウサイズによってはサイドバーが横スベリしたりフッターに被ったりといった感じです。

これはいかん、ということで再チャレンジしました。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
jQuery(function(jQuery) {
    var pursue = jQuery("#pursue"); /* 固定したいものを指定 */
    var offset = pursue.offset(); 
    var stopslip; /* 横スベリ防止 */
    var content = jQuery("#content");
    var sidebar = jQuery("#sidebar");
    var win = jQuery(window);
    var footer = jQuery("#footer").height()+70;
    var min_width = 1000;

    jQuery(window).scroll(function () {
        if(content.height() > sidebar.height() && win.scrollTop()+win.height() >= offset.top+pursue.height()+footer){
            if (win.width() >= min_width){
                stopslip = win.width()/2+200;
                pursue.css({
                    position:'fixed',
                    width:300,
                    bottom:footer,
                    left:stopslip
                });
            } 
            else if(win.width() < min_width) {
                stopslip = 700-win.scrollLeft();
                pursue.css({
                    position:'fixed',
                    width:300,
                    bottom:footer,
                    left:stopslip
                });
            }
        }
        else {
            pursue.css({
                position:'static'
            });
        }
    });

    jQuery(window).resize(function () {
        if(content.height() > sidebar.height() && win.scrollTop()+win.height() >= offset.top+pursue.height()+footer){
            if (win.width() >= min_width){
                stopslip = win.width()/2+200;
                pursue.css({
                    position:'fixed',
                    width:300,
                    bottom:footer,
                    left:stopslip
                });
            } 
            else if(win.width() < min_width) {
                stopslip = 700-win.scrollLeft();
                pursue.css({
                    position:'fixed',
                    width:300,
                    bottom:footer,
                    left:stopslip
                });
            }
        }
        else {
            pursue.css({
                position:'static'
            });
        }
    });

});
</script>

.resize()にて、ウィンドウのスクロールだけではなく、リサイズに対しても同様の処理をさせてます。

サイドバーを固定位置に配置・自動追尾させる条件は、

• 記事の縦の長さがサイドバーより長く且つ、縦スクロールした長さ+ウィンドウの縦の長さが初期の固定パーツ位置+フッター分の長さを超えた場合

というような感じです。
そして、

1. ウィンドウの横の長さが1000px以上の場合
2. ウィンドウの横の長さが1000px未満の場合

で、それぞれ異なる処理をしています。
1000pxは、

var min_width = 1000;

これは記事の左端からサイドバー右端までの長さです。

処理の異なる部分は stopslip の部分です。
ウィンドウの横の長さによって、stopslip にそれぞれ異なる値を代入しています。

1.の場合

//ウィンドウの真ん中から200px右
stopslip = win.width()/2+200;

2.の場合

//700px(記事の横の長さ)から横スクロール分引く
stopslip = 700-win.scrollLeft();

200px、700pxの部分は別途変数を宣言して数値を算出して代入してもいいかもです。

そして今回、サイドバーの固定位置はbottomを基準にしています。
そうすることで、サイドバーの空白を少なくしています。

bottom:footer,

footerは

var footer = jQuery("#footer").height()+70;

ここはフッターに被らない様、適当にいい感じに調整しています。

と、まあこんな感じですが、もうちょっとスッキリさせることができるかも・・・