2012年7月25日水曜日

サイドバーをfixedさせたときにfooterにかかる問題を解決

  • このエントリーをはてなブックマークに追加

2カラムサイトを作っていると、
たまにコンテンツ部分が短くて、
サイドバー部分が長いページができたりする。
その際にサイドバーのcssにおいて、position:fixedにしていると、
フッターに被ってしまう問題が生じてしまう。
でこれを解決するための方法を考えてみた。

$(function(){
  if($("#floating").length){
    var footY = $("#foot").position().top;
    var floatingHeight = $("#floating").height();
    var floatingFirstY = $("#floating").position().top;

    $(window).bind("scroll",function(e){
      var y = 0;
      var y1 = document.documentElement.scrollTop;
      var y2 = document.body.scrollTop;

      if(y1 > y2) y = y1;
      else y = y2;
   
      var floatingY = $("#floating").position().top;
   
      if(y + floatingFirstY + floatingHeight > footY){
        $("#floating").css({
          position:"absolute",
          top:footY - floatingHeight - 20
        });
      }
      else{
        $("#floating").css({
          position:"fixed",
          top:""
        });
      }
    });
  }
});
ということでこんな感じで記述してあげると、
idがfloatingの要素がフッターに被りそうになっても被らない感じになる。
とはいってもこれはテスト段階でもあるので、正直どのサイトにも通用するかは微妙だけど、
多分大丈夫じゃないのかなと思っている。

Adsense