JavaScriptでサイドバーを固定して関連記事を表示させる

f:id:love-musicflavor0928:20160126003539p:plain

先日「関連記事」のサイドバーモジュールを発見しました。

www.love-wd-yuka.com

残念ながらサイドバーは流れてしまうので、どうにか記事下に付ける事が出来ないのか？と考えていましたが、HTMLの性質上出来ない事が判明(^^;

わざわざ調査して下さったみたいで、ありがとうございますm(__)m

psn.hatenablog.jp

私も諦めきれず、なんとかならないかな〜と。で昨日いい事を思いついちゃいました。サイドバーの一番下に関連記事を置いて、Javaで固定させればいんじゃないか？と。モジュールとJavaの二刀流ですｗで、さっそくやり方を調べてみる事に。

実装コードはこちらのブログを参考にしました。引用させて頂きました。

totora0155.hatenablog.jp

実装方法は簡単２ステップ！
問題点が一つ
数字を変えると調整できます
実装する時の注意点
あわせて読みたいがやっぱりいいかも
さいごに

実装方法は簡単２ステップ！

まずはデザインのカスタマイズでサイドバーの編集、サイドバーの一番下部へ関連記事モジュールを移動します。（※左右に２列あるWebデザインに限ります）次にこちらにある、コードをそのままコピーしてきて「フッタ」(HTML編集)へ貼り付けます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
(function($) {
  $(function() {
    $.fn.fixedPosHateblo = function(px) {
      var $this, $win, height, isLowerThanOffset, isSeeBottom, thisWidth, toggleFixed, topOrBottom;
      px || (px = 0);
      $win = $(window);
      $this = $(this);
      height = {
        box2Inner: $this.height(),
        offset: (function() {
          var $tgt, result;
          $tgt = $this;
          result = $this.offset().top;
          while (!$tgt.offsetParent().is('html')) {
            $tgt = $tgt.offsetParent();
            result += $tgt.offset().top;
          }
          return result;
        })(),
        getSum: function() {
          return this.box2Inner + this.offset;
        }
      };
      topOrBottom = innerHeight > height.getSum() ? 'top' : 'bottom';
      isLowerThanOffset = function() {
        return ($win.scrollTop() + px) > height.offset;
      };
      isSeeBottom = function() {
        return (innerHeight + $win.scrollTop() - px) > height.getSum();
      };
      toggleFixed = function(condition) {
        if (condition) {
          return this.css('position', 'fixed');
        } else {
          return this.css('position', 'static');
        }
      };
      $this.css('width', $this.width());
      $this.css(topOrBottom, px != null ? px : 0);
      $win.scroll(function() {
        return toggleFixed.call($this, topOrBottom === 'top' ? isLowerThanOffset() : isSeeBottom());
      });
    };
    $('#box2-inner').fixedPosHateblo(100);
  });
})(jQuery);
</script>