今回はjQueryを使いサイドバーをスクロールに合わせて固定させ、
フッターに重ならないように固定を解除させる方法をご紹介致します。

当サイトの右側にあるサイドバーに実装しております。
 ※ 現在は実装しておりません、ちょっと変わったのを考え中です。

では、設置方法です。
詳しく書くと大変なので、要点を絞って簡単に記入しますね。


jQuery本体を
<head> ~ </head> 内に貼り付けて下さい。


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

jQueryの読み込みが完了しましたら 
<body> ~ </body> 内にスクリプトを貼り付けて下さい。


<script>
$(function(){
    var target = $(".scrollbox");//ここに追尾したい要素名を記載
    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: "0px"});
            }
        }else{
            target.css({position: "static", top: "auto"});
        }
    });
});
</script>

スクリプトの読み込みが完了しましたら

<div class="scrollbox">

HTMLタグと差し替える

</div>

をサイドバーに記載して設置完了です。

この方法はCSSを変更する必要が無いので、簡単に実装する事が可能です。

特に問題なく動いております。

でも当サイトの個別記事ページを見て頂くとわかるのですが、記事が終わった所で
固定されています。これは何かと思いCSSを見たらわかりました。

要素に <footer class="article-footer"> となっているので、
フッターと認識したのかと思います。


scroll

でも動作は至って安定しているので、私のお気に入りです。

時間があったら、この固定要素を過ぎてから
コンテンツを出現させる方法を考えてみます。

因みに右側も固定されていますが、
こっちはちょっとアレなのでそのうちに。

最後にコードを編集するのに便利な無料ソフトがあるので一緒に紹介しますね。

興味があったら見て下さい。

  そのソフトは、
Microsoft Expression Web 4】 
  です。

※ 当サイト右下にあるアニメーションポップアップサイドバー実装方法は、
  コメント欄からご要望を頂ければ、紹介したいと思います。
続きを読む