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の要素がフッターに被りそうになっても被らない感じになる。
とはいってもこれはテスト段階でもあるので、正直どのサイトにも通用するかは微妙だけど、
多分大丈夫じゃないのかなと思っている。
0 件のコメント:
コメントを投稿