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 件のコメント:
コメントを投稿