footer.position.changer.jsの記述内容
jQueryと一緒に以下を読み込みます。
var FOOTER_ELEMENT = $('#js-Footer');
var resizedTimer = false;
//footerのpositionを fixed / static に切り替える関数
var FooterPositionChanger = function(){
var _windowHeight = $(window).height();
var _bodytHeight = $('body').height();
if(_bodytHeight < _windowHeight){
//documentが極端に短いのでフッターをposition:fixedにする
FOOTER_ELEMENT.removeClass('is-static').addClass('is-fixed');
}else{
//スクロールが必要な長さなのでフッターは静的に配置
FOOTER_ELEMENT.removeClass('is-fixed').addClass('is-static');
}
}
window.onload = function(){
//footerが他のコンテンツに重ならないように、表示領域を確保
FOOTER_ELEMENT.css('height',FOOTER_ELEMENT.outerHeight());
//footerのpositionをfixedとstaticに切り替え
$(window).on('resize', function() {
if (resizedTimer !== false) {
clearTimeout(resizedTimer);
}
resizedTimer = setTimeout(function() {
FooterPositionChanger();
},200);
}).resize();
}
css
たぶん以下のような感じ
.footer{
visibility:hidden;
}
.footer.is-fixed{
visibility:visible;
position:fixed;
bottom:0;
width:100%;
}
.footer.is-static{
visibility:visible;
}