最近はやりのフッターに重ならない追尾するサイドバーをjQueryで作ってみました! | Select *
Web Web制作

最近はやりのフッターに重ならない追尾するサイドバーをjQueryで作ってみました!

auto_tracking_side_barオハヨウゴザイマス!
久しぶりにブログのカスタマイズに手を出した@deepblue_willです。

最近、スクロールに合わせてサイドバーがついていくのをよく見かけます。これなら余りまくっているサイドバーの領域を有意義に使えるかもしれない!ってことでjQueryを使って作ってみました。


スクロールすると追尾するサイドバー

まずどうやって実装すればよいか検討がつかなかったので、ググって見ました。
結果、参考にしたのが以下の2つのサイト

そして出来たのがこんなかんじです。

デモ => サイドバー追尾サンプル
ソース => GitHub

コードの解説をするよ

今回の実装のために書いたJavascriptはこんなかんじ
$(function(){
    var target = $(".fixed-item");
    var footer = $("footer")
    var targetHeight = target.outerHeight(true);
    var targetTop = target.offset().top;

    $(window).scroll(function(){
        var scrollTop = $(this).scrollTop();
        if(scrollTop > targetTop){
            // 動的にコンテンツが追加されてもいいように、常に計算する
            var footerTop = footer.offset().top;
            
            if(scrollTop + targetHeight > footerTop){
                customTopPosition = footerTop - (scrollTop + targetHeight)
                target.css({position: "fixed", top:  customTopPosition + "px"});
            }else{
                target.css({position: "fixed", top: "10px"});
            }
        }else{
            target.css({position: "static", top: "auto"});
        }
    });
});


ポイントは次の2点です。
  1. 追尾させたい要素に差し掛かったら追尾開始
  2. 追尾している要素がフッターにぶつかったら、ぶつからないように制御

言葉だけじゃよくわからないと思うので、簡単な図を用意してみました。
auto_tracking_sidebar_pic
①は現在見ている範囲の上辺の位置
②は追尾させたい要素の上辺の位置
③は追尾させたい要素の高さ
④はフッターの上辺の位置

① > ②になった時に追尾を開始するようにすればポイント1を満たせるのはすぐわかるかと思います。
ですが、ポイント2が少しややこしいです。
式にすると単純で、① + ③ > ④ になった時にフッターに重ならないように制御(要素を上にずらす)します。

追尾している要素がフッターにぶつかってしまうということは、追尾要素の底辺がフッターの上辺(④)に当たるということ。
なので、「追尾要素底辺 > ④」の時に制御をかけたい。
追尾要素の底辺は① + ③になるので、① + ③ > ④の時に制御すればOKということです。

最後に

ちょっとしたポイントとして、フッター上辺(④)はスクロールの都度計算しています。
理由は、ブログパーツなどで画面描写後にコンテンツが追加されても大丈夫にするためです。
もし、動的にコンテンツが追加されないっていうのであれば、6行目あたりに移動してもいいかと思います。

久しぶりにブログカスタマイズしたのですが、絶望的にソースが汚いですね。。
なんでちゃんと表示されているか不思議な部分もあったりします(笑)

いずれ大工事という作り直ししたいなぁと思う今日このごろです。

ではでは。

このブログをRSS登録する! この記事をはてブする!

Comment

Zenback

Categories

  • Lifehack (57)
  • Web (140)
  • まとめ (172)
  • コンピュータ (132)
  • 仕事 (10)
  • 趣味 (104)
  • 雑記 (88)
  • Popular Posts