jQueryプラグイン「fitSidebar」とヘッダー固定時に余白を入れる方法

⚠️投稿日または最終更新日から4年以上経過している内容です。

サイドバーを追従（固定）させるjqueryプラグイン「fitSidebar」を使用しています。

最近では css の position: sticky; だけで固定にすることができますが、縦長の場合は見切れてしまい、下の方にあるコンテンツがいちばん最後までスクロールしないと見れない問題があり、ちょっと気になります。

fitSidebar だとスクロールに合わせてコンテンツも移動するので大変便利です。

それぞれ用途に合わせて使い分けています。

そこで fitSidebar を使っていて、更にヘッダーも固定の場合、ページの下に行って、上に戻るときに、サイドバーの頭が見切れてしまう問題にぶつかりましたので、余白を設けるカスタマイズを行ってみました。

javascript

// カスタマイズ箇所を抜粋
var adjustUp = function(){
  var top = c.lastDownFixedTop + (c.lastDownScrollTop - scrollTop)

  // 原案
  // if(top > 0){
  //   top = offset.top-scrollTop;
  //   if(top < 0) top = 0;
  // }

  // ヘッダー固定対応案
  var header_height = $('#header').outerHeight() + 15 // 任意のpx
  if(top > header_height){
    top = header_height;
    if((scrollTop + header_height) < c.wrapper.offset().top){
      top = offset.top-scrollTop;
      if(top < 0) top = 0;
    }
  }

  c.target.css({
    top : top,
    bottom : 'auto'
  });
  c.lastUpFixedTop = top;
  c.lastUpScrollTop = scrollTop;
}