下記の関数により、フッター下部の空白を埋めることができる。
どのページサイズ(縦)にも適応できる。
# JavaScript
function makeFooterSticky(){
var footer_pos = $('.footer').offset().top;
var footer_height = $('.footer').outerHeight();
var body_height = $(document.body).outerHeight();
if (footer_pos + footer_height < body_height){
$('.footer').addClass('fixed-bottom');
}
else{
$('.footer').removeClass('fixed-bottom');
}
}
// CSS
// bootstrapを使用している場合は、それに付属している。
.fixed-bottom {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
}
// .footerクラスはJqueryで識別するためだけに使用しているので、
// cssファイル内に記述する必要ない。<!-- HTML -->
<footer class="footer">
Fotterここ
</footer>
使い方
Footerのエレメントにfooterクラスを追加する。
Bootstrapを使わない場合は、上記のCSSをcssファイルに追加する。
以下のJavaScriptをonloadなど必要なときに実行する。
makeFooterSticky();
↧